rem在响应式布局中的应用_html/css_WEB-ITnose

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。对于整个页面来说工作量还是挺大的。所以这里提供了俩种方法

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

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

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){  $rem : 16x;}

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

考虑dpr

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

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

点击查看示例>>

我的博客:http://bigdots.github.io、

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