移动端布局 - REM方式
默认以宽度为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 -- 添加了
px2remrem2px便捷换算方法，以及为window附加了 rem 属性，可以方便查询当前rem与px的对应关系 - 2017/02/23 -- 修正翻转屏事件通过
addEventListenner绑定时使用onorientationchange引发的失效
移动端布局 - REM方式的更多相关文章
- 移动端布局rem em
1.概念 em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初 ...
- 移动端布局 rem,和px
1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂. // rem 布局重定义 (function(){ $('html').css('font-size ...
- 移动端布局Rem
一.最好用没有之一 http://www.jianshu.com/p/b00cd3506782 虽然博主说这个方案已经过期了 但是新方案还没有理解 就接着沿用这个 可以根据自己常用的设计稿的宽度修改 ...
- 移动端布局-rem
created(){ // 设置根字号 // 屏幕宽度 setHTML(); // addEventListener()不冲突 window.addEventListener('resize', se ...
- 移动端利用rem实现自适应布局
好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...
- web移动端布局方式整理
写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文 ...
- HTML+CSS : 笔记整理(3 移动端布局简单了解)
流体布局:宽度用百分比,计算真实宽度用函数 : width: calc(25% - 4px); box-sizing: 1.content-box:默认计算方式 ,宽度和高度分别应用到元素的内容框.在 ...
- 移动端布局的一些设置（在viewport里设置使页面显示相同宽度，显示相同像素大小）
viewport(视口) 具体数值(不设置时默认为980 ,部分安卓手机不支持设置成具体数值) width=device-width 和设备宽度保持一致 user-scalable=no 是否允许用户 ...
- Vuex里的module选项和移动端布局
Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出
随机推荐
- STL中的优先级队列priority_queue
priority_queue(queue类似)完全以底部容器为根据,再加上二叉堆(大根堆或者小根堆)的实现原理,所以其实现非常简单,缺省情况下priority_queue以vector作为底部容器.另 ...
- group by实现原理及其作用
mysql中group by实现方式有三种,松散索引,紧凑索引,临时文件(文件排序). 在网上看了相关的介绍,大部分介绍都比较晦涩难懂,这里说下我的理解. 在学习SQL优化时,我们都知道可以对grou ...
- JVM小结--类文件结构
字节码是构成Java平台无关性的基石.实现语言无关性的基础是虚拟机和字节码存储格式. Java语言中的各种变量.关键字和运算符的语义最终是由多条字节码命令组成,因此字节码命令所能提供的语义描述能力肯定 ...
- UIScrollView原理
我是Mike Ash的Let’s Build…系列文章的忠实粉丝,在这一系列文章中他从头设计Cocoa的控件来解释他们的工作原理.在这里我要做一点类似的事情,用几行代码来实现我自己的滚动试图.不过首先 ...
- Mongodb 笔记03 查询、索引
查询 1. MongoDB使用find来进行查询.find的第一个参数决定了要返回哪些文档,这个参数是一个文档,用于指定查询条件.空的查询会匹配集合的全部内容.要是不指定查询,默认是{}. 2. 可以 ...
- webapi框架搭建-安全机制（一）
本系列博客链接:webapi框架搭建系列博客 前言 webapi接口是开放给外部使用的,包括接口的地址,传参的规范,还有返回结果的说明.正因为接口的开放性,使得接口的安全很重要.试想一下,用抓包工具( ...
- vuejs实现数据驱动视图原理
什么是数据驱动 数据驱动是vuejs最大的特点.在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom. 比如说我们点击一个button,需要元 ...
- linux shell 获取当前日期/时间
1. 当前日期 [root@Tomcat DFJR-ERP]# cur_date="`date +%Y-%m-%d`" [root@Tomcat DFJR-ERP]# echo $ ...
- 使用abcpdf将html转换成pdf文件
ABCpdf.NET使用介绍 最新做一个项目需要生成pdf文档以供打印,研究决定使用abcpdf这款组件,先针对其使用方法做一个简单的总结介绍以给有需要的朋友做参考. 一. ABCpdf.NET简单介 ...
- ASP.NET根据IP获取省市地址
1.在网站的跟路径下面添加 QQWry.dat 文件,这个文件是IP数据库文件 2.添加以下一个类 IPScanner C# 代码 复制 public class IPScanner { ...