关于手机适配那点事儿

这是我第一次建立自己的个人关于工作的博客，由于在工作中经常能碰到页面适配的问题，所以，这几天就专门抽出时间来研究一下这个手机适配的问题，如有问题，欢迎大家来提意见！

响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷

说到适配，首先我先考虑到的就是单位。网页中常用的文字大小单位是 px(Pixels)，em，现在《CSS Values and Units Module Level 3》中新增了 rem 这个单位。

一、什么是 rem 呢？

「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。也就是说，在css样式中，所有的元素大小是根据根元素大小来定义的。这样一个新的单位兼容性如何呢？请出 Caniuse 看看吧：

由上图可以看出IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我可以任意的使用 rem 了。

那么，会有人问，这个rem和em又有什么区别呢？

EM特点

-1. em的值并不是固定的；

-2. em会继承父级元素的字体大小。

我们知道 em 的计算是基于父级元素的。

请看以下例子：

以上代码，我给body设置的字体是16px，选择器content大的大小是相对于它的根元素body来定义的，也就2em=2*16px=32px；反之，如果我希望content的字体是32px，那么就要32/16=2em。大家还可以看下，我给这个conten设置了一个width，是20em，那为什么它的宽度不是320px，这就是因为content的width是相对于它自身的font-size来定义了，这个时候content的font-size大小是32px，所以他的宽度应该是640px；也就是说，div的font-size是继承父元素的大小，而width是相对于它自身来定义的。事实上，不仅是width，子元素中除了font-size的em是根据父元素的font-size确定的，其他所有em都是根据自身的font-size确定的。

接下来，我在content里面继续嵌套一个div，我希望它的字体是12px

运行效果

打印效果：

还有一种情况，就是当子元素自身已经定义好font-size，也就是它的font-size是px时候，那么它的宽度也是根据自身的font-size来改变

运行效果：

打印结果

由此看出，在不设置元素font-size的情况下，em总是根据父元素的font-size来确定长度；即使元素设置了font-size，多次嵌套使用em也往往会造成疏忽，不仅使用前需要大量计算，而且不能保证没有漏网之鱼。这将是一个繁杂而低效率的工作。

接下来我们正式来说说这个rem

 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。

比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem），html中的所有标签样式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大胆的用rem作单位。

比如你设置根元素html的font-size：20px，那么1rem=20px；此时，宽60px，高100px的元素样式就可以写成

width：3rem；                                                                                                                                                                                       height：5rem；

那么我们如何来使用这个rem呢？这里我找到一篇来自_minooo的文章分享，他在里面很详细的介绍了rem的用法，下面的链接可以进去认真看下

手机端页面自适应解决方案—rem布局

当然，你可以引入 CSS 预处理工具（Sass、LESS 、Stylus等）自动计算 rem 值，这里就不一一举例了。