移动端布局 REM

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 Xm.dx.com

最后我们再来看一看他的兼容性:

web app变革之rem

下面是参考链接:
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

原文地址:https://www.cnblogs.com/Rosefxd/p/5320248.html