下面的代码一是我根据rem的使用经验，自己写的一个rem.js，发现很好用，能适用所有移动端h5页面的自适应需求：

代码一：

window.onload = function(){

    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是

      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/

    getRem(720,100)

};

window.onresize = function(){

    getRem(720,100)

};

function getRem(pwidth,prem){

    var html = document.getElementsByTagName("html")[0];

    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

    html.style.fontSize = oWidth/pwidth*prem + "px";

}

下面的代码二，是我在小米网上看到的移动端h5页面自适应代码，效果跟我的一样，也可以使用：

代码二： 小米官网的写法

!function(n){

    var  e=n.document,

         t=e.documentElement,

         i=720,

         d=i/100,

         o="orientationchange"in n?"orientationchange":"resize",

         a=function(){

             var n=t.clientWidth||320;n>720&&(n=720);

             t.style.fontSize=n/d+"px"

         };

         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))

}(window);

看这两个函数，把这些代码放到js里面，规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。
实际应用起来就是，#box1{ height:100px;}而调用了rem就是#box1{ height:1rem;}以此类推。 100px = 1rem . 1px = 0.01rem。在页面中，凡是跟尺寸有关的padding、margin、width、height等等，都可以用rem来写单位，这样当不同分辨率的手机在看同一个页面时，效果几乎是一样的。

下面附图，看效果：

代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" href="../css/reset-min.css"/>

    <script>

        window.onload = function(){

            getRem(720,100)

        };

        window.onresize = function(){

            getRem(720,100)

        };

        function getRem(pwidth,prem){

            var html = document.getElementsByTagName("html")[0];

            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

            html.style.fontSize = oWidth/pwidth*prem + "px";

        }

        /*

        //小米官网的写法

        !function(n){

            var  e=n.document,

                 t=e.documentElement,

                 i=720,

                 d=i/100,

                 o="orientationchange"in n?"orientationchange":"resize",

                 a=function(){

                     var n=t.clientWidth||320;n>720&&(n=720);

                     t.style.fontSize=n/d+"px"

                 };

                 e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))

        }(window);*/

    </script>

    <style>

        .wrap{position:absolute;top:0;left:0;bottom:0;right:0;background:#fefefe;}

        .title{width:100%;height:0.98rem;line-height:0.98rem;color:#fff;background:#e02222;text-align: center;font-size:0.32rem;}

    </style>

</head>

<body>

    <div class="wrap">

        <div class="title">首页</div>

    </div>

</body>

</html>

这里的demo只对字体大小、高度、行高做了rem换算，其他的没做，只是给大家看一个效果。就到这了，希望点赞哦！

原文地址：https://segmentfault.com/a/1190000008721148

移动端rem.js使用方法的更多相关文章

  1. 移动端rem.js的使用方法

    下面的代码一是我根据rem的使用经验,自己写的一个rem.js,发现很好用,能适用所有移动端h5页面的自适应需求: 代码一: window.onload = function(){ /*720代表设计 ...

  2. html5 750 REM JS换算方法

    在安卓手机低版本浏览器,如果进页面快速执行的话会出现计算宽度不正确的情况,解决方法是放在onload方法里面执行,但这种解决方式在一些高版本浏览器中会出现页面闪动,所以使用判断浏览器版本的方式来解决, ...

  3. 移动端rem.js

    rem 只与 html 的 font-size 有关,比如html{font-size: 16px} body{font-size: 62.5%},那么 1rem 还是 16px,与其他无关 在头部引 ...

  4. rem.js的用法及在浏览器端的适配

    首先介绍下自己,我是从后端转前端,对于前端的见识还不深望各位全当一个新手自述....... 随着移动设配的更新换代,市场上涌现了大量的非主流设备分辨率,比如华为手机...... 更新换代快的大前提下自 ...

  5. 移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式

    这段时间内,涉及到的都是移动端开发,说到移动端开发,我们就会思考到,目前分辨率的问题,如果用px为单位的话,在不同移动设备和不同分辨率下,页面的效果可能会有所不同,甚至导致页面变形.所以在次我们就用到 ...

  6. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  7. 移动端1px问题处理方法

    在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而 ...

  8. rem.js移动布局实例教程

    最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...

  9. 移动端报表JS开发示例--获取定位

    上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...

随机推荐

  1. ExecutorCompletionService原理具体解释

    在JDK并发包中有这么一个类ExecutorCompletionService,提交任务后,能够按任务返回结果的先后顺序来获取各任务运行后的结果. 该类实现了接口CompletionService: ...

  2. 线段树+离线 hdu5654 xiaoxin and his watermelon candy

    传送门:点击打开链接 题意:一个三元组假设满足j=i+1,k=j+1,ai<=aj<=ak,那么就好的.如今告诉你序列.然后Q次询问.每次询问一个区间[l,r],问区间里有多少个三元组满足 ...

  3. HDU3183 RMQ/贪心

    A Magic Lamp Problem Description Kiki likes traveling. One day she finds a magic lamp, unfortunately ...

  4. ES transport client使用

    ES transport client bulk insert 传输(transport)客户端 TransportClient利用transport模块远程连接一个elasticsearch集群.它 ...

  5. LA4122

    哈夫曼树+搜索 抄了抄代码 先开始不知道怎么限制哈夫曼树,然后看了看代码,是用bfs序来限制.因为每个节点的右子树节点肯定不小于左儿子,同一层也是.所以先搞出bfs序,然后搜索,判断每一层右边是否大于 ...

  6. ACM_Exponentiation

    Exponentiation Time Limit: 2000/1000ms (Java/Others) Problem Description: Problems involving the com ...

  7. MYSQL日期时间字符串互转

    --MYSQL date_format(date,'%Y-%m-%d') -------------->oracle中的to_char(); 日期时间转字符串 --MYSQL str_to_da ...

  8. Java中Ajaxa中文乱码问题

    客户端: url='test/queryList?itemName='+itemName; //如果只转一次url=encodeURI(toUrl);   到后台时:乱码    servlet里dec ...

  9. CSS自定义消息提示

    1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  10. js match 来点击切换图片

     定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. ...