移动端rem布局的理解
2016-05-20 13:44
615 查看
rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。
它们之间其实很相似,只不过rem计算的规则是依赖根元素,em是依赖父元素计算。
rem布局
原理是,先按定高宽设计出来页面,然后转换为rem单位,配合js查询屏幕大小来改变html的font-size,
最终做出所谓的完美自适应。
rem适用场景
rem+js是宽度自适应,无法做到高度自适应,所以那些对高度要求很高的rem+js无法实现。改变浏览器宽度,你会发现,页面所有元素的高宽都等比例缩放,
也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。。
优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。
缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了。
rem究竟是什么
rem一般都有一个标配机型,我就以5s来说。5s机型下是这样的,
6 plus下是这样的,
发现了没有,在大屏和小屏下它们的效果是一样的。这就是rem+js的魅力。
rem究竟是什么,它就是通过js修改根元素的大小,达到整个页面的缩放。
为什么rem会这样,rem是依赖于根元素的大小进行缩放的,所以它的js相当重要。
//常规情况下js根据屏幕宽度动态计算 !(function(doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { var width = docEle.clientWidth; width && (docEle.style.fontSize = 20 * (width / 320) + "px"); }; win.addEventListener(evt, fn, false); doc.addEventListener("DOMContentLoaded", fn, false); }(document, window));
先写到这里吧,有时间再想写贴代码。
相关文章推荐
- android recovery模式
- 开发android的注意点
- Android图片压缩(质量压缩和尺寸压缩)
- Android Studio 做单元测试笔记
- AndroidStudio应用调试技巧(上)
- android图文居中按钮控件
- iOS 图片轮播器
- Android问题——PopupWindow的isShowing()一直都是返回false
- ionic actionsheet 在android下面目全非
- IOS开发-画饼图画柱状图
- Android自定义View总结(一)基础知识与实例
- Android优秀资源整理合集(论菜鸟到高级攻城狮)
- 关于android中ListView的Adapter如何设计能通用的一些看法
- Android相关Demo
- A Regularized Competition Model for Question Diffi culty Estimation in Community Question Answering Services-20160520
- JAXB - Annotations, The Object Factory: XmlRegistry, XmlElementDecl
- android 日常迭代与维护总结一
- Android图片压缩
- Android 4.0 5.0 6.0特性
- 【android开发教程】环境搭建及HelloWorld