默认以宽度为640px的设计稿为基准页面，然后通过JS获取当前显示设备的尺寸，对应的调整 html 标签的font-size大小，从而实现通过以rem为单位的移动端布局适配。

具体代码##

(function(win, doc) {

    var timer = null,

        html = doc.documentElement,

        baseWidth = html.dataset.basewidth * 1 || 640,

        metaEl = document.querySelector('meta[name="viewport"]'),

        event = 'onorientationchange' in win ? 'orientationchange' : 'resize';

    if (!metaEl) {

        metaEl = document.createElement('meta');

        metaEl.setAttribute('name', 'viewport');

        metaEl.setAttribute('content', 'initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0');

        html.firstElementChild.appendChild(metaEl);

    }

    function layoutCalc() {

        var width = html.getBoundingClientRect().width,

            ratio = width / baseWidth * 100, // 当前屏幕与基准屏幕的宽度之比

            devicePixelRatio = window.devicePixelRatio,

            rem = ratio < 100 ? ratio < 50 ? 50 : ratio : 100;

        if (!/\.\d+/.test(devicePixelRatio.toString())) {

            html.dataset.dpr = devicePixelRatio;

        }

        html.style.fontSize = rem + 'px'; //根绝比值去等比例缩小页面的元素尺寸

        win.px2rem = function(v) {

            return v * 1 / rem;

        }

        win.rem2px = function(v) {

            return v * 1 * rem;

        }

        win.rem = rem;

    }

    win.addEventListener(event, function() {

        clearTimeout(timer);

        timer = setTimeout(layoutCalc, 300);

    }, false);

    win.addEventListener('pageShow', function(e) {

        if (e.persisted) {

            clearTimeout(timer);

            timer = setTimeout(layoutCalc, 300);

        }

    }, false);

    layoutCalc();

}(window, document));

使用说明：##

· 自定义基准页面尺寸

通过为 html 标签添加 data-basewidth 属性来指定基准页面的尺寸。

示例：

<html data-basewidth="750" >

    ...

</html>

· 定义页面内容的字体大小

对于一些符合标准的dpr值（只要是整数，例如：1,2,3）等，都会为 html 标签再附加一个 data-dpr 属性，然后开发者可以通过该属性来结合CSS规则，从而实现对于不同dpr情况下，对内容字体大小的调整。

示例代码：

html[data-dpr="1"] .dpr-text{

	    font-size:12px;

    }

html[data-dpr="2"] .dpr-text{

	    font-size:24px;

    }

html[data-dpr="3"] .dpr-text{

	    font-size:36px;

    }


<p class="dpr-text">测试文字</p>

BUG 修复

  • 2017/02/25 -- 添加了 px2rem rem2px 便捷换算方法，以及为 window 附加了 rem 属性，可以方便查询当前rem与px的对应关系
  • 2017/02/23 -- 修正翻转屏事件通过 addEventListenner 绑定时使用 onorientationchange 引发的失效

移动端布局 - REM方式的更多相关文章

  1. 移动端布局rem em

    1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...

  2. 移动端布局 rem,和px

    1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂. // rem 布局重定义 (function(){ $('html').css('font-size ...

  3. 移动端布局Rem

    一.最好用没有之一 http://www.jianshu.com/p/b00cd3506782 虽然博主说这个方案已经过期了 但是新方案还没有理解 就接着沿用这个 可以根据自己常用的设计稿的宽度修改 ...

  4. 移动端布局-rem

    created(){ // 设置根字号 // 屏幕宽度 setHTML(); // addEventListener()不冲突 window.addEventListener('resize', se ...

  5. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  6. web移动端布局方式整理

    写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...

  7. HTML+CSS : 笔记整理(3 移动端布局简单了解)

    流体布局:宽度用百分比,计算真实宽度用函数 : width: calc(25% - 4px); box-sizing: 1.content-box:默认计算方式 ,宽度和高度分别应用到元素的内容框.在 ...

  8. 移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）

    viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...

  9. Vuex里的module选项和移动端布局

    Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出

随机推荐

  1. Chapter8(IO库) --C++Prime笔记

    1.IO对象不能拷贝或对IO对象赋值,进行IO操作的函数通常是以引用方式传递和返回流. 2.一个流一旦发生错误,其上的后续的IO操作都会失败.代码通常应该在使用一个流之前检查它是否处于良好状态.确定一 ...

  2. Netlink 介绍(译)

    原文地址:http://people.redhat.com/nhorman/papers/netlink.pdf 译文: 1 介绍 在Linux和Unix的众多发行版中的网络配置功能, 都是编程者事后 ...

  3. random函数详解

    1. 随机函数  Math.random() Math.random();    取值范围是  [ 0.0,1.0 )  的左闭右开区间.具体源代码如下所示:   Math.random()是生成0~ ...

  4. Hadoop基础-Hadoop快照管理

    Hadoop基础-Hadoop快照管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.快照的作用 快照可以迅速对文件(夹)进行备份,不产生新文件,使用差值存储,默认是禁用状态. ...

  5. 科学计算三维可视化---TraitsUI（Group对象组织界面）

    使用Group对象组织界面 将一组相关的Item对象组织在一起 from traitsui.api import Group from traits.api import HasTraits,Int, ...

  6. 科学计算三维可视化---TVTK入门（安装与测试）

    推文:http://docs.huihoo.com/scipy/scipy-zh-cn/tvtk_intro.html 推文:http://code.enthought.com/pages/mayav ...

  7. javascript精雕细琢（一）：var let const function声明的区别

    目录 引言 一.var 二.let 三.const 四.function 五.总结 引言        在学习javascript的过程中,变量是无时无刻不在使用的.那么相对应的,变量声明方法也如是. ...

  8. C# 中printDocument打印、预览、打印机设置和打印属性的方法

    private void Form1_Load(object sender, System.EventArgs e) { //获取或设置一个值,该值指示是否发送到文件或端口 printDocument ...

  9. CF 1008C Reorder the Array

    You are given an array of integers. Vasya can permute (change order) its integers. He wants to do it ...

  10. 【译】第八篇 Replication：合并复制-How it works

    本篇文章是SQL Server Replication系列的第八篇,详细内容请参考原文. 在这一系列的前几篇你已经学习了如何在多服务器环境中配置合并复制.这一篇将介绍合并代理并解释它在复制过程中扮演的 ...