下面的代码一是我根据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. json、js数组真心不是想得那么简单

    之前因为做前台的东西比較少,对于json和js数组的认识仅局限于一种固定格式.这样的固定的思维在开发前台时,特别是近期使用highcharts插件时.让我感到特别不明确.通过查询最终心头的疙瘩解开了. ...

  2. JArray获取元素值

    MXS&Vincene  ─╄OvЁ  &0000003 ─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好 ...

  3. MySQL 相邻两条数据相减

    <!-- 计算每两次消费的间隔天数 --> SELECT B.MEN_ID,TIMESTAMPDIFF(DAY,B.PRE_DATE,B.CURR_DATE) AS DAYS FROM ( ...

  4. WPF学习笔记——在“System.Windows.StaticResourceExtension”上提供值时引发了异常

    在"System.Windows.StaticResourceExtension"上提供值时引发了异常 因应需要,写了一个转换器,然后窗体上引用,结果就出来这个错.编译的时候没事, ...

  5. Codeforces Round #281 (Div. 2) A. Vasya and Football 暴力

    A. Vasya and Football   Vasya has started watching football games. He has learned that for some foul ...

  6. Android shape自定义形状，设置渐变色

      <?xml version="1.0" encoding="utf-8"?> <!-- android:shape=["rect ...

  7. 杂项：BIM

    ylbtech-杂项:BIM 建筑信息化模型(BIM)的英文全称是Building Information Modeling,是一个完备的信息模型,能够将工程项目在全生命周期中各个不同阶段的工程信息. ...

  8. 对ip数据进行分类----c++

    #!/usr/bin/expect set ip [lindex $argv ] set password [lindex $argv ] spawn -l root ${ip} "host ...

  9. B - Magnets

    Problem description Mad scientist Mike entertains himself by arranging rows of dominoes. He doesn't ...

  10. 6月10遇到的bug

    3.遇到的BUG        1.@Service(version = "1.0.0", interfaceClass = TransactionItemService.clas ...