css单位有3种:
px:绝对单位
em:相对父元素的单位
rem:相对根元素(页面的html)的单位--css3新增的
下面来仔细讲下近年来在webapp中常用的rem:
什么是rem?
rem就是指相对根元素(页面html)的单位。
例如:html设置了font-size为10px,那么1rem就是10px,2rem就是20px
html{ font-size:10px; } h1{ font-size:2em;//相当于20px }
移动端布局以前使用什么方法?
一般来讲,移动端会使用流式布局、固定宽度、响应式做法、viewport缩放。
1.流式布局
流式布局指的是宽度使用百分比。目前,亚马逊、携程、兰亭的移动端就是用流式布局。他们宽度使用百分比,高度使用px。这样,在不同的屏幕适配器下,宽度会被拉伸,导致比例不协调
2.固定宽度
固定宽度虽然易于开发,但是会使大屏幕两边留白
3.响应式做法
响应式是用media query,但是这样并不能适应所有的屏幕
4.viewport缩放
天猫的web app的首页就是采用这种方式去做的,以320宽度为基准,进行缩放,最大缩放为320*1.3 = 416,基本缩放到416都就可以兼容iphone6 plus的屏幕了,这个方法简单粗暴,又高效
rem能等比适应所有的屏幕
使用rem,所有的元素都相对于根元素进行缩放,非常方便开发。最重要的点就在与计算出根元素的font-size值。可以使用JS来计算。
到这里肯定有很多人会问是怎么计算出不同分辨率下font-size的值?
首先假设页面设计稿是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。
上面的表格蓝色一列是Demo3中页面的尺寸,页面是以640的宽度去切的,怎么计算不同宽度下font-site的值,大家看表格上面的数值变化应该能明白。举个例子:384/640 = 0.6,384是640的0.6倍,所以384页面宽度下的font-size也等于它的0.6倍,这时384的font-size就等于12px。在不同设备的宽度计算方式以此类推。
下面推荐两个国内用了rem技术的移动站,大家可以上去参考看看他们的做法,手机淘宝目前只有首页用了rem,淘宝native app的首页是内嵌的web app首页。
淘宝首页:m.taobao.com
D X:m.dx.com
最后我们再来看一看他的兼容性:
下面是参考链接:
http://isux.tencent.com/web-app-rem.html
http://www.cnblogs.com/leejersey/p/3662612.html
http://div.io/topic/1092
http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
--2016.3.25