CSS3新单位rem：理解与使用指南 - CSDN文库

153 浏览量更新于2023-05-04 收藏 73KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"这篇教程详细解释了CSS3中的新单位`rem`，即相对于根元素HTML的字体大小单位。在Web设计中，选择合适的字体大小单位一直是讨论的热点，px、em各有优缺点。px提供精确控制，但不适应用户调整浏览器字体大小的需求，而em则是相对单位，依赖于父元素的字体大小，方便响应式设计，但可能导致复杂的计算。rem单位的引入解决了这一问题，因为它始终基于HTML根元素的字体大小，不受子元素影响，简化了响应式设计的实现。文章还回顾了px和em的基本概念，通过示例展示了如何使用它们以及调整body的font-size来影响整个页面的字体大小。" 在Web设计中，`px`是一个固定单位，用于提供精确的像素控制，确保在各种设备上呈现一致的效果。然而，`px`的一个主要缺点是不响应用户对字体大小的个性化设置，当用户放大或缩小浏览器字体时，页面布局可能受到影响。相对单位`em`的出现是为了弥补这一不足。`em`的值基于其父元素的字体大小，允许元素尺寸随着父元素的大小变化而变化。例如，若将body的`font-size`设置为`62.5%`（即`10px`），则`1em`等于`10px`。这样，可以使用`em`来定义元素的字体大小，如`h1`的`font-size: 2.4em`将变为`24px`，`p`的`font-size: 1.4em`为`14px`。但使用`em`时需要注意计算的复杂性，因为每个元素的`em`值都是相对于其父元素的`font-size`。 CSS3引入的`rem`单位（root em）解决了`em`的一些问题。`rem`不是基于当前元素的父元素，而是基于HTML根元素（即`<html>`标签）。这意味着，无论页面的哪一部分，只要使用`rem`单位，其大小都将根据HTML的`font-size`来计算，简化了响应式设计的实现，同时也保持了字体大小的一致性，即使用户更改了浏览器的字体大小。在响应式设计中，通过调整根元素的`font-size`，可以轻松地改变整个页面的缩放比例，而不需要为每个元素分别设置`em`值。例如，设置`html { font-size: 62.5%; }`后，所有使用`rem`的元素都会按照这个基础值进行缩放。这使得创建适应不同屏幕大小和用户偏好设计变得更加简单。 `rem`单位结合了`px`的精确度和`em`的响应性，成为了现代Web开发中设置字体大小和布局的理想选择。通过理解并熟练运用`rem`，开发者可以构建更加灵活、易维护的网页，并提升用户体验。

资源详情

资源推荐

详解详解CSS3 rem(设置字体大小设置字体大小) 教程教程

css3新增了相对单位 rem ,使用rem同em一样皆为相对字体大小单位，不同的是rem相对的是HTML根元素。鉴于很多网友提

到了rem，所以我这里就对其中一个总结。

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，

还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的

利弊，使各种技术都不太理想，但又无法不去用。

在详细介绍rem之前，我们先一起来回顾一下我们常用的两种记量单位，也是备受争论的两个：

PX为单位

EM为单位

px为单位为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户

在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那

些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

em为单位为单位

前面也说了，使用是“px”为单位是比较方便，而又一致，但在浏览器中放大或缩放浏览页面时会存在一个问题，要解决这个问

题，我们可以使用“em”单位。

这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认

值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。

body {

font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/

}

h1 {

font-size: 2.4em; /*2.4em × 10 = 24px */

}

p {

font-size: 1.4em; /*1.4em × 10 = 14px */

}

li {

font-size: 1.4em; /*1.4 × ? = 14px ? */

}

为什么“li”的“1.4em”是不是“14px”将是一个问号呢？如果你了解过“em”后，你会觉得这个问题是多问的。前面也简单的介绍过

一回，在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值，其

真正的计算公式是：

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

这样的情况下“1.4em”可以是“14px”,也可以是“20px”，或者说是“24px”，总之是一个不确定值，那么解决这样的问题，要么你

知道其父元素的值，要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。

rem为单位为单位

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the

root element” 。下面我们就一起来详细的了解rem。

前面说了“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元

素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在

根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38502290

粉丝: 6
资源: 963

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈