下面的代码一是我根据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. 浅谈 System.Decimal 结构

    引言 我们知道,Microsoft .NET Framework 中的 System.Decimal 结构(在 C# 语言中等价于 decimal keyword)用来表示十进制数,范围从 -(296 ...

  2. 虚拟机 开发板 PC机 三者之间不能ping通的各种原因分析

    这个问题事实上也相对照较简单.可是非常多网友都给我发消息说 遇到不能ping,每一个人都得回答一次确实显得心有余而力不足.如今我对遇到这几种问题给出最完整的解决方式. (说实话基本上也仅仅要这几种可能 ...

  3. 基于Windows Azure 搭建基于SharePoint 2010 Intranet、Extranet、Internet (4): 配置传出邮件服务: 使用 outlook.com 发送邮件通知

    前几篇文章,已经安装了SharePoint 2010,今天将演示如何配置传出邮件.由于某些原因,企业可能没有安装自己邮件服务器,此时我们可以使用公共的邮箱服务来发送邮件通知,比如outlook.com ...

  4. http自己定义超时检測方法、主动抛出异常

    上次为了解决无网路由器超时的问题,将问题重心转移到了HttpClient. HttpUrLConnection上面,什么各种设置ReadTimeout. connectionTimeOut,还有所谓的 ...

  5. 数据结构C++，栈的实现

    #include <iostream>#include <cstdlib> template<class T>void changeLength1D(T*& ...

  6. Find them, Catch them（并查集）

    http://poj.org/problem?id=1703 题意:有两个黑帮团伙,共n名团伙成员(不知道属于这两个黑帮中的哪一个).现在警察有一些信息,每条信息包含2个人的编号,如果给出A a b, ...

  7. Oracle11g聚合函数

    聚合函数就是基于多行数据返回一行结果,下面就是Oracle提供的一些列聚合函数: AVG COLLECT CORR CORR_* COUNT COVAR_POP COVAR_SAMP CUME_DIS ...

  8. C#：设置webBrowser框架与系统相对应的IE内核版本

    通常情况下,我们直接调用C#的webBrowser控件,默认的浏览器内核是IE7.  那么如何修改控件调用的默认浏览器版本呢? /// <summary> /// 修改注册表信息来兼容当前 ...

  9. Windows phone开发 页面布局之屏幕方向

    (博客部分内容参考Windows phone开发文档) Windows phone的屏幕方向是利用Windows phone设备的方向传感器提供的数据实现切换的. Windows Phone支持纵向和 ...

  10. Asp.net MVC4 Step By Step（5）-使用Web API

    Web API是ASP.net MVC4新增的一个特色, 应用于处理Ajax请求, 他同时使用了Web标准规范, 比如Http, Json,和XML,以及一系列构建REST数据服务的参考原则, 和AS ...