默认以宽度为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. Linux应用程序设计之网络基础编程

    1.TCP/IP协议概述 1.1.OSI参考模型及TCP/IP参考模型 OSI协议参考模型是基于国际标准化组织(ISO)的建议发展起来的,从上到下工分为7层:应用层,表示层,会话层,传输层,网络层,数 ...

  2. Hadoop生态圈-hbase常用命令

    Hadoop生态圈-hbase常用命令 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  3. 《剑指offer》面试题45 圆圈中最后剩下的数字(Java版本）

    引言 这道题网上的讲解都是直接抄书,没意思,所以想自己写一写,补充一下,便于自己理解.另外,大家都忽略了经典解法,虽然这种解法效率不及第二种,但是我觉得在项目当中阅读性其实很重要,牺牲一点点效率保证代 ...

  4. UIScrollView的contentSize与contentOffset

    UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容. Scroll View为你处理缩小放大手势,UIScrollView实现了这些手势,并且替你处理对于它们的探测和回应. ...

  5. 转：iPhone上关于相机拍照的图片的imageOrientation的问题

    用相机拍摄出来的照片含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息.如果我们忽略orientation信息,而直接对照片进行像素处 ...

  6. python---图表的使用

    一:使用预览 二:插件使用来源 Highcharts(本次使用) ECharts 三:插件的使用 HighCharts的简单上手 (一)后台传递数据 getHchart方法获取用户数据(用户名,数据列 ...

  7. [POI2007]Zap

    bzoj 1101: [POI2007]Zap Time Limit: 10 Sec  Memory Limit: 162 MB[Submit][Status][Discuss] Descriptio ...

  8. python学习笔记5--random

    一.random模块 import random,string print(random.randint(1,199))#1-199随机取一个整数 print(string.digits) #所有的数 ...

  9. Java实现链式存储的二叉查找树（递归方法）

    二叉查找树的定义: 二叉查找树或者是一颗空树,或者是一颗具有以下特性的非空二叉树: 1. 若左子树非空,则左子树上所有节点关键字值均小于根节点的关键字: 2. 若右子树非空,则右子树上所有节点关键字值 ...

  10. 【AtCoder】AGC022 F - Leftmost Ball 计数DP

    [题目]F - Leftmost Ball [题意]给定n种颜色的球各k个,每次以任意顺序排列所有球并将每种颜色最左端的球染成颜色0,求有多少种不同的颜色排列.n,k<=2000. [算法]计数 ...