移动web适配之rem_html/css_WEB-ITnose

前言

提到rem，大家首先会想到的是rm，px这类的词语，大多数人眼中这些单位是用于设置字体的大小的，没错这的确是用来设置字体大小的，但是对于rem来说它可以用来做移动端的响应式适配哦。

兼容性

先看看兼容性，大部分主流浏览器都支持，可以安心的往下看了。

rem设置字体大小

rem是 （font size of the root element），官方解释 ，意思就是根据网页的跟元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的，举一个简单的例子，现在大部分浏览器 IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px即

html {    font-size:16px;}

html{    font-size:16px;}

那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是

p {    font-size: 0.75rem; //12÷16=0.75（rem）}

p{    font-size: 0.75rem; //12÷16=0.75（rem）}

基本上使用rem这个单位来设置字体大小基本上是这个套路，好处是加入用户自己修改了浏览器的默认字体大小，那么使用rem时就可以根据用的调整的大小来显示了。

但是rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。下面来具体说一下

rem进行屏幕适配

在讲rem屏幕适配之前，先说一下一般做移动端适配的方法，一般可以分为：

1简单一点的页面，一般高度直接设置成固定值，宽度一般盛满整个屏幕。

2稍复杂一些的是利用百分比设置元素的大小来进行适配，或者利用flex等css去设置一些需要定制的宽度。

3再复杂负责一些的响应式页面，需要利用css3的media query属性来进行适配，大致思路是根据屏幕不同大小，来设置对应的css样式。

上面的一些方法，其实也可以解决屏幕适配等问题，但是既然出来的rem这个新东西，也一定能兼顾到这些方面，下面具体来说具体使用rem：

rem适配

先看一个简单的例子：

.con {      width: 10rem;      height: 10rem;      background-color: red; }

.con {      width: 10rem;      height: 10rem;      background-color: red; }