下面的代码一是我根据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. Python自定义钉钉机器人发送自动化结果报告

    环境python3.5+jenkins # coding:utf-8 import urllib.request import json import sys import time import r ...

  2. 【IOS 开发】Object - C 入门 之 数据类型具体解释

    作者 : 韩曙亮 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/38544659 1. 数据类型简单介绍及输出 (1) 数据类型 ...

  3. 转：Java 计算2个时间相差多少年，多少个月，多少天的几种方式

    日期比较对象 DayCompare 代码用到了  lombok ,如果不用,其实就是把getter / setter方法自己写一遍,还有构造方法. @Data @Builder public stat ...

  4. 解析HTTP协议六种请求方法

    标准Http协议支持六种请求方法,即: 1,GET 2,HEAD 3,PUT 4,DELETE 5,POST 6,OPTIONS 但其实我们大部分情况下只用到了GET和POST.如果想设计一个符合RE ...

  5. golomb哥伦布编码——本质上就是通过0来区分商和余数

    哥伦布编码是一个针对整数的变长编码方式,详细介绍可以看维基百科.这里简单介绍下: 哥伦布编码使用指定的整数 M 把输入的整数分成两部分:商数 q.余数 r. 商数当做一元编码,而余数放在后面做为可缩短 ...

  6. hdu 6118（最小费用流）

    度度熊的交易计划 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  7. bzoj1116 [POI2008]CLO——并查集找环

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1116 分析性质,只要有环,那么给环定一下向就满足了条件: 环上点的其他边可以指向外面,所以两 ...

  8. 基于Spark的网站日志分析

    本文只展示核心代码,完整代码见文末链接. Web Log Analysis 提取需要的log信息,包括time, traffic, ip, web address 进一步解析第一步获得的log信息,如 ...

  9. Django day06 模版层(二) 过滤器 标签

    一: 模板语言之过滤器: " | " 前后的区分: 前面的是函数的第一个参数, 后面的是python的一个函数, 冒号后面的是第二个参数例:  <p>过滤器之默认值:{ ...

  10. POJ 1236 Tarjan算法

    这道题认真想了想.. [ 题目大意:有N个学校,从每个学校都能从一个单向网络到另外一个学校,两个问题 1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 2:至少需要添加几条 ...