响应式网页设计:rem设置网页字体大小自适应

首先简单科普一下什么是响应式网页。响应式网页是指会根据输出设备的分辨率不一样，而自动调整布局的网页。同时，在输出设备分辨率改变时，也能及时自动调整。说穿了，就是三个字：自适应。

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

当咱们天天面对缤纷的互联网世界的时候，文字不只仅传递给咱们众多的信息资讯，并且在设计师的手里，文字在网页中的排版承载着一种艺术的直觉。

网页中经常使用的文字大小单位是 px(Pixels)，em，如今《CSS Values and Units Module Level 3》中新增了 rem 这个单位。

相关文章：CSS3教程:相对单位rem详解

1、那到底什么是 rem 呢？

规范中明确写道：

Equal to the computed value of ‘font-size’ on the root element.

「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？

太好了，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了，我能够放肆的使用 rem 了。

但是，W3C 那些家伙为何要闲着下面疼的新增这样一个单位呢？它和 em 有啥区别呢？

咱们知道 em 的计算是基于父级元素的，在实际使用中给咱们的计算带来了很大的不便。因此 rem 的出现解救了我这样不会算术的人，不再用担忧父级元素的 font-size 了，由于它始终是基于根元素（html） 的。

好比默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

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

可是像我这样的懒人或者团队开发中尚未引入 CSS 预处理工具的该肿么办呢？只能搬个计算器啪啪啪了吗？别急，你还能够变通一下。咱们改变一下 html 的默认 font-size=10px 不就好计算了嘛！Like this：

html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}

须要注意的是，为了兼容不支持 rem 的浏览器，咱们须要在 rem 前面写上对应的 px 值，这样不支持的浏览器能够优雅降级。其实不用太纠结是默认的 font-size:100%，仍是设置为 font-size:62.5%，若是你引入 了 CSS 预处理工具那么天然可使用默认值，若是因为其余缘由使用 font-size:62.5% 也无可厚非，彻底能够在 body 中重置回你须要的默认 font-size。

2、为啥要用 rem 呢？

黑夜给了我黑色的眼睛，我将用它寻找关怀。

浏览器中用户都是能够自定义默认的文字大小的，若是使用 px，用户自行在浏览器设置中改变了文字大小后，网页上是不会变化的。咱们不能排除视障用户（如近视）、老年用户不会这么作，做为一个具备「人文关怀」的 前端，咱们彻底能够考虑这些状况。由其是在引入了 CSS预处理工具以后，这几乎不会增长什么成本。

也再次印证前面提到的：响应式网页不只仅是响应不一样类型的设备，并且须要响应不一样的用户需求。

各个浏览器的设置方法以下：

1.  IE浏览器：按下 Alt 键，打开菜单栏→查看→字体大小

2. Chrome 浏览器：设置→显示高级设置→网页内容

3. Firefox 浏览器：按下 Alt 键，打开菜单栏→工具→选项→内容选项卡

4. 其余浏览器就不一一举例了……

3、何时用 rem？

既然 rem 的可用性更好，是否是在全部地方都去使用呢？别捉急，一般在标题，正文等大面积文字的位置可使用 rem。可是在一些特殊的设计场景，rem 可能会致使布局错位，好比这样一个回顶部的按钮：

因此，何时用 rem，如何用好 rem？ 这也须要你拿出 18K的黑色乌金睛来照亮整个页面。让咱们一块儿：

抛开布局，响应文字；抛开成见，响应心里。

在面对响应式开发的时候，什么才是合适的，什么是不合适的，你真的想好了吗？