<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<script>

    function getRem (){

           var currentWidth = document.documentElement.clientWidth;

            var fontSize  = 100;

            var width = 320;

            var currentFontsize = currentWidth / width * fontSize;

            document.querySelector('html').style.fontSize = currentFontsize + 'px';

    }

    getRem();

    window.onresize = function(){

        getRem();

    }

</script>

<style>

    p {

        font-size: 1rem;

    }

</style>

<body>

    <p>测试</p>

</body>

</html>

手机端适配rem代码片段的更多相关文章

  1. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  3. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  4. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  5. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  6. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  7. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  8. rem手机端适配

    <script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...

  9. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

随机推荐

  1. iconfont的简单使用

    下载-阿里巴巴矢量图标 网站链接:http://www.iconfont.cn/ 首页如下: 首页-进入图标库--所有图标--搜索/点击你想要的图标--添加购物车 点击购物车(下载) 如下图: 点击下 ...

  2. 阿里CI/CD、DevOps、分层自动化技术

    原文地址:http://www.infoq.com/cn/news/2017/01/alibaba-yunxiao-cicd-devops 在互联网时代,产品快速迭代的重要性不言而喻.不管是传统企业还 ...

  3. leetcode笔记：Add Binary

    一.题目描写叙述 Given two binary strings, return their sum (also a binary string). For example, a = "1 ...

  4. lua学习笔记（十）

      模块与包  使用require加载模块     一个规范的模块应该返回一个table作为这个模块所有导出功能的集合     lua里没通过任何强制性语法规则要求创建模块时反回一个table     ...

  5. hibernate实现多变联合查询

    Hibernate主要支持两种查询方式:HQL查询和Criteria查询.前者应用较为广发,后者也只是调用封装好的接口. 现在有一个问题,就是实现多表连接查询,且查询结果集不与任何一个实体类对应,怎么 ...

  6. MHA常用命令

    .查看ssh登陆是否成功 masterha_check_ssh --conf=/etc/masterha/app1.cnf .查看复制是否建立好 masterha_check_repl --conf= ...

  7. Selenium 应用 WebDriverWait 和 expected_conditions（待验证）

    收藏在我的收藏看不到,只能copy了,转载至http://www.cnblogs.com/yicaifeitian/p/4749149.html 哈哈,我始终相信贴出来总会有人看.WebDriverW ...

  8. 多媒体开发之--- rtsp 中的H264 编码+打包+解码相关知识es、pes、ts...

    1)ES流(Elementary Stream): 也叫基本码流,包含视频.音频或数据的连续码流. 2)PES流(Packet Elementary Stream): 也叫打包的基本码流, 是将基本的 ...

  9. phalcon builder 用法

    $rawSql = $builder->columns(["aa","bb"]) ->from("TableName") -&g ...

  10. Linux中crontab下scp文件传输的两种方式

    Linux下文件传输一般有两个命令scp.ftp(工具需要下载安装) 本文主要讲讲scp的文件传输脚本 1.scp ssh-keygen -t rsa免输入密码,传输 这里假设主机A 用来获到主机B的 ...