移动端rem布局实践
一、rem 适配基本概念:
二、布局方案:
方案1:
在 index.html 中添加如下代码:
<script>
let html = document.documentElement; window.rem = html.getBoundingClientRect().width / 16 ;
html.style.fontSize = window.rem + 'px';
</script>
这里基于宽 320px 的屏幕分成了 16 份,也就是 1rem = 20px。
目前大多数设计稿都是根据 iphone6 的宽( 375px )走的,建议这里分成 25 份,也就是 1rem = 15px,计算起来方便些。
方案2:
在 index.html 中添加如下代码:
<script>
(function(win, doc) {
var h;
win.addEventListener('resize', function() {
clearTimeout(h);
h = setTimeout(setUnitA, 500);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(h);
h = setTimeout(setUnitA, 300);
}
}, false);
var setUnitA = function() {
doc.documentElement.style.fontSize = doc.documentElement.clientWidth / 16 + 'px';
};
setUnitA();
})(window, document)
</script>
这段代码监听了窗口调整和页面显示两个事件实现了动态适配的效果。
延展:
1:自执行匿名函数和立即执行的函数表达式区别:
// 这是一个自执行的函数,函数内部执行自身,递归
function foo() { foo(); } // 这是一个自执行的匿名函数,因为没有标示名称
// 必须使用arguments.callee属性来执行自己
var foo = function () { arguments.callee(); }; // 这可能也是一个自执行的匿名函数,仅仅是foo标示名称引用它自身
// 如果你将foo改变成其它的,你将得到一个used-to-self-execute匿名函数
var foo = function () { foo(); }; // 有些人叫这个是自执行的匿名函数(即便它不是),因为它没有调用自身,它只是立即执行而已。
(function () { /* code */ } ()); // 为函数表达式添加一个标示名称,可以方便Debug
// 但一定命名了,这个函数就不再是匿名的了
(function foo() { /* code */ } ()); // 立即调用的函数表达式(IIFE)也可以自执行,不过可能不常用罢了
(function () { arguments.callee(); } ());
(function foo() { foo(); } ()); // 另外,下面的代码在黑莓5里执行会出错,因为在一个命名的函数表达式里,他的名称是undefined
// 呵呵,奇怪
(function foo() { foo(); } ());
注意:arguments.callee在ECMAScript 5 strict mode里被废弃了,所以在这个模式下,其实是不能用的。
参考:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html
我们一直叫的自执行函数,确切的说是自执行匿名函数(Self-executing anonymous function),但此文原作者倡议使用立即调用的函数表达式(Immediately-Invoked Function Expression)这一名称。
2:这里为什么要把windows、document作为参数传进去?
——使全局变量以参数形式变成自执行函数内部的局部变量。
为什么这么做?
——提高程序效率。
为什么能提高效率?
——这得从javascript的机制说起:所谓的scope chain作用域链, 在当前作用域中如果没有该属性(局部变量)则向上一层作用域中寻找,一直到最上层,也就是window。也就是说全局变量和下级作用域都是window的一个属性,向下依此类推。
参考:https://segmentfault.com/q/1010000000311686
移动端rem布局实践的更多相关文章
- 第130天:移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 关于移动端 rem 布局的一些总结
[资源一]基础知识恕不回顾 基础知识参考以下两篇博客: http://isux.tencent.com/web-app-rem.html http://www.w3cplus.com/css3/def ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 第132天:移动web端-rem布局(进阶)
rem布局(进阶版) 该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注:不要手动设置viewport ...
- 一看就懂得移动端rem布局、rem如何换算
这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有 ...
- 移动端rem布局和百分比栅格化布局
移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放 设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口 ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- 关于移动端rem 布局的一些总结
1.rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位 2.为什么web app要使用rem? 实现强大的屏幕适配布局(淘宝,腾讯,网 ...
随机推荐
- ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
为了加强安全性,MySQL5.7为root用户随机生成了一个密码,在error log中,关于error log的位置,如果安装的是RPM包,则默认是/var/log/mysqld.log. 一般可通 ...
- 利用Dockerfile构建一个基于centos 7,包括java 8, tomcat 7,php ,mysql+mycat的镜像
Dockerfile内容如下: FROM centos MAINTAINER Victor ivictor@foxmail.com WORKDIR /root RUN rm -f /etc/yum.r ...
- 【记录】JS 生成 URL 二维码
示例代码: <html> <head> <title>example</title> </head> <body> <sc ...
- multipart数据结构
--[boundary]\r\n [headers]\r\n \r\n [content]\r\n --[boundary]\r\n [headers]\r\n \r\n [content]\r\n ...
- ng1和ng2的部分对比----angular2系列(四)
前言: angular2相比angular1做了革命性的改变.对于开发者来说,我们知道它框架的实现上改变极大.我们看到代码也能发现它写法上变化很大,似乎完全是另一个东西. 但是当我们真正去写下去的时候 ...
- DG环境数据库RMAN备份策略制定
DG环境数据库RMAN备份策略制定: 主库(Primary) 全库备份 归档备份 删除历史文件夹 备库(Standby) 删除归档 引用说明 主库(Primary) $ crontab -l 0 1 ...
- CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
- 【字符编码】Java编码格式探秘
一.前言 在分析Comparable和Comparator的时候,分析到了String类的compareTo方法,String底层是用char[]数组来存放元素,在比较的时候是比较的两个字符串的字符, ...
- cookie相关
参考百度百科: Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109和2965都已废弃, ...
- [Java 基础]控制语句
选择语句 if语句 if语句会判断括号中的条件是否成立,如果成立则执行if语句中的代码块,否则跳过代码块继续执行. 语法 if(布尔表达式) { //如果布尔表达式为true将执行的语句 } 例 ...