rem在响应式布局中的应用

rem/em/px/pt的基友关系

px
像素相对长度单位,相对于显示器屏幕分辨率而言

em
相对长度单位,根据其父元素来设置字体大小

pt
point,是印刷行业常用单位,等于1/72英寸

rem
CSS3新增的一个相对单位,是根据网页的跟元素(html)来设置字体大小

rem应用于适配

rem的特性同样适用于width和height,我们可以根据根元素的font-size值来改变元素的宽高值,由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的值,从而达到我们css样式中的适配效果。

rem的适配规则

1.选择基准
虽然我们所写出的页面要在不同的屏幕大小设备上运行,但是我们写页面的时候,必须要选择其中一种屏幕大小作为初始的基准,而这个基准的选择应该根据我们所拿到的视觉稿来决定,

2.rem数值计算
正常情况下rem的值默认为16px,这样在整个页面的css计算过程中太过繁琐。比如,现在有个30px宽度的元素,就得写成30/16rem。对于整个页面来说工作量还是挺大的。所以这里提供了俩种方法

  • 可以将html的font-size设置成100px
    这样设置,在写单位时直接将数值除以100在加上rem的单位就可以了。如果设计稿的字体是16px;我们就可以写成1.6rem。

    • 这里为什么不用10?
      因为google等浏览器对最小字体有限制,即最小为12px,所以设置10px会有问题。
  • 使用sass

    1
    2
    3
    4
    $rem : 16x;
    @function px_rem($px){
    @return ($px/$rem) + rem;
    }

3.动态设置html的font-size
随着屏幕大小的改变,html的font-size的值应该是基准rem*改变后的屏幕宽度 / 基准屏幕宽度

  • 利用css的media query来设置(这种是一个宽度区间内是一个rem)

    1
    2
    3
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    $rem : 16x;
    }
  • 利用javascript来动态设置(这种方法每一个宽度点都会有一个新的rem)

    1
    document.getElementsByTagName('html')[0].style.fontSize = 基准rem*window.innerWidth / 基准屏幕宽度 + 'px';

考虑dpr

一般我们获取到的视觉稿大部分尺寸是双倍大小的,我们一般会自觉的将标注/2,但是当我们配合rem使用时,完全可以按照视觉稿上的尺寸来设置。

  • 设计给的稿子双倍的原因是iphone等高清屏手机的存在,高清屏的像素比(device pixel ratio)dpr比较大,所以显示的像素较为清晰。

  • 一般手机的dpr是1,iphone4,iphone5这种高清屏是2,iphone6s plus这种高清屏是3,可以通过js的window.devicePixelRatio获取到当前设备的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。

  • 拿到了dpr之后,我们就可以在viewport meta头里,取消让浏览器自动缩放页面,而自己去设置viewport的content

    1
    meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

这样我们就直接可以使用视觉稿上的尺寸了。

点击查看示例>>

我的博客:http://bigdots.github.iohttp://www.cnblogs.com/yzg1/

如果觉得本文不错的话,帮忙点击下面的推荐哦,谢谢!