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

代码一：

window.onload = function(){

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

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

    getRem(,)

};

window.onresize = function(){

    getRem(,)

};

function getRem(pwidth,prem){

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

    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=,

         d=i/,

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

         a=function(){

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

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

         };

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

}(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(,)

        };

        window.onresize = function(){

            getRem(,)

        };

        function getRem(pwidth,prem){

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

            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:;left:;bottom:;right:;background:#fefefe;}

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

    </style>

</head>

<body>

    <div class="wrap">

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

    </div>

</body>

</html>

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

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

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

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

  2. 移动端rem.js

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

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

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

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

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

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

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

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

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

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

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

  8. 前端Js跨域方法汇总—剪不断，理还乱，是跨域

    1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 C ...

  9. JS调用OC方法并传值，OC调用JS方法并传值////////////////////////zz

     iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码)     最近项目里面有有个商品活动界面,要与web端传值,将用户在网页点击的商品id 传给客户端,也就是js交互,其实再说明白一点 ...

随机推荐

  1. 淘宝数据库OceanBase SQL编译器部分 源码阅读--生成物理查询计划

    淘宝数据库OceanBase SQL编译器部分 源码阅读--生成物理查询计划 SQL编译解析三部曲分为:构建语法树,制定逻辑计划,生成物理执行计划.前两个步骤请参见我的博客<<淘宝数据库O ...

  2. 我为什么不喜欢 CoreData

    我为什么不喜欢 CoreData   我一直不喜欢 Core Data,以前不太敢明目张胆地这么表达,现在收集到越来越多相关的信息,所以给大家分享一下,我为什么不喜欢 Core Data. Core ...

  3. linux led子系统（二）

    对于led子系统中,有那么多得trigger,下面就来简单了解下. 1.default-on static void defon_trig_activate(struct led_classdev * ...

  4. NCR Teradata银行业数据仓库解决方案

    NCR Teradata银行业数据仓库解决方案 ---------------------------------------------------------------------------- ...

  5. hibernate 的分页查询

    hibernate的分页查询有个好处,就是不用管数据库方言.比如db2的分页查询很麻烦,但是用hibernate的方式,就完全不用管这些了 /* 使用HQL分页查询Customer信息 */ publ ...

  6. android studio Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Request"

    android studio运行会遇到Error:Unable to tunnel through proxy. Proxy returns "HTTP/1.1 400 Bad Reques ...

  7. MIPS 指令集将在近期开源，RISC-V 阵营慌吗？

    消息称,MIPS 指令集即将开源. eetimes 17 日报导,Wave Computing 公司表示,在明年第一季度发布最新 MIPS 指令集体系和 MIPS 最新内核 R6 的时候将开源 MIP ...

  8. Android Studio解决导入项目非常慢

    Android Studio比Eclipse ADT有巨大的优势.Android Studio原生支持使用Gradle来构建项目,使用动态语言Groovy定义项目构建的过程,避免了build.xml文 ...

  9. js 原型继承和class继承

    摘自http://www.liaoxuefeng.com/ 在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类 ...

  10. XMU C语言程序设计实践（3）

    问题描述: 以一个n的长方阵表示迷宫,0和1分别表示迷宫中的通路和障碍,设计一个程序,对任意设定的迷宫,求出一条从入口到出口的通路,或得出没有通路的结论. 对于本问题需用栈实现“穷举求解”算法,即:从 ...