什么是rem？

响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好地传递和交流，让所有人无障碍地获取信息。同样的，响应式设计应该遵循「内容优先，移动优先」的原则。在网页中，内容主要由文字、图片等元素组成。那么，我们如何实现文字的响应式呢？

rem是什么？

在规范中明确写道：「rem」指的是根元素（root element，即html）的字体大小。有趣的是，从旧版本的IE6到现代浏览器Chrome，它们约定根元素默认的font-size都是16px。这个新的单位在兼容性方面表现如何呢？让我们来看一下Caniuse的数据吧！太棒了，IE9以及主流版本的Firefox、Chrome、Safari、Opera都支持rem。这意味着我们可以放心地使用rem了。

那为什么W3C要新增这样一个单位呢？它和em有什么区别呢？我们知道em的计算是基于父级元素的，在实际使用中给我们带来了很多不便。因此，rem的出现解决了这个问题，不用再担心父级元素的font-size了，因为它始终是基于根元素（html）的。比如，默认的html font-size16px，如果我们想要设置12px的文字大小，可以通过计算得到12/160.75rem。当然，你也可以使用CSS预处理工具（如Sass、LESS、Stylus等）自动计算rem值。

但是，如果你还没有引入CSS预处理工具，该怎么办呢？你可以将html的默认font-size设置为10px，这样计算就会变得简单。示例代码如下：

```

html {

font-size: 62.5%; /* 10/1662.5% */

}

body {

font-size: 12px;

font-size: 1.2rem;

}

p {

font-size: 14px;

font-size: 1.4rem;

}

```

需要注意的是，为了兼容不支持rem的浏览器，我们需要在rem前面写上对应的px值，这样不支持rem的浏览器可以优雅降级。无论是将html的font-size设置为100%还是设置为62.5%，都没有太大区别。如果你引入了CSS预处理工具，自然可以使用默认值。如果由于其他原因使用font-size: 62.5%，也无可厚非，你完全可以在body中重新设置你需要的默认font-size。

为什么要使用rem？

浏览器中的用户可以自定义默认的文字大小。如果使用px单位，当用户在浏览器设置中改变了文字大小后，网页上的文字大小不会随之变化。作为有人文关怀的前端开发者，我们应该考虑到这些情况，特别是视障用户（如近视）和老年用户。尤其是在引入CSS预处理工具之后，使用rem几乎不会增加额外成本。这再次印证了响应式网页需要响应不同用户需求的原则。

不同浏览器中设置文字大小的方法如下：

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

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

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

如何使用rem？

既然rem具有更好的兼容性，那么我们是不是应该在所有地方都使用rem呢？并不是，我们需要根据实际情况来决定。通常，在标题、正文等大面积文字的位置可以使用rem。但是在一些特殊的设计场景下，rem可能会导致布局错位。比如，一个回到顶部的按钮。

所以，我们需要根据具体情况来决定是否使用rem，并且需要灵活运用rem来实现优雅的页面布局。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。