关于rem 移动端开发(rem可以在移动端开发过程中带来强大的便利性)

2/13/2017来源:iOS开发人气:978

what is rem ?

  1)CSS3中的计量元素大小的单位,类似px、pt、em。

  2)一种相对根元素font-size的计算方式。1rem = <html>'s font-size px (你懂就好)

  3)使用场景:每个元素的宽高、文字大小、行距、补白等一切可以使用长度单位的地方。

  4)使用范例:  

rem在移动端的适配

  由上面的例子可以看出,使用rem进行布局的网站,我们只需要修改根元素的font-size大小,则整个网页的元素均可以按照预期进行等比例的计算和适配。

  比如,在上面的例子中,我们将html的font-size改为32px,那么box1的样式则变成了宽320px,高64px,文字大小则变为16px;

  也就是说,在开发过程中,我们只要基于一种宽度的设备使用rem进行布局。然后使用js或css的media来根据宽度改变html的基础font-size。就可以适配各种移动端设备了。

  

  步骤如下:

    1)假设我们拿到了一张750px宽度的设计图。并且准备在iphone6上进行调试,iphone6的屏幕宽度为375px,他们的比例是2:1;

      初始过程:

        设置<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>

        设置html{font-size:37.5px}   

          //为什么设置为37.5px? 你也可以设置为其它的值。但为了易于换算和记忆,我们默认为每种屏幕设置他的基础font-size=(屏幕宽度/10px);

      开发过程:将每个元素设置的单位使用rem(任何原本使用px,em,pt的地方),数量为(设计图上的元素的实际px/2/37.5)rem;

      ...

      好了,我们的页面已经开发完成了。

    2)此时,我们的页面,在iPhone6下面,已经是妥妥的了。那么如何兼容其它不同宽度的移动设备呢?

      思路:改变每种不同宽度的设备的根元素的css属性,使其font-size值都为设备宽度/10px。

   

   方案1:在页面头部插入一段JS。  //为什么是头部?--防止页面闪烁

  方案2:在css文件中增加媒体查询

rem进行适配的一些优点:

  1)相对改变viewport,rem的方式不变形,不模糊。

  2)相对于em,rem不相对于父级,所以不会导致混乱。

  3)相对于px,无需多说了。

  4)相对各种媒体查询进行自适应,rem的方式可以一键更改,省了无数代码,且维护方便。

rem的一些不适用场景

  1)想要在ipad or pc or 超级大屏设备 上使用。(好大一堆字&&图片和视频被拉模糊了)。

  2)想不出来了。