在响应式设计中，我们需要根据不同的屏幕尺寸和设备类型，为网页设置不同的字体大小。传统的像素单位不再适用，我们需要使用 Ems 和 Rems 这两种相对单位来解决这个问题。在本文中，我们将详细介绍 Ems 和 Rems 的使用方法，以及如何在响应式设计中正确地运用它们。
什么是 Ems 和 Rems
Ems 和 Rems 都是相对单位，相对于父元素的字体大小来计算。Ems 相对于父元素的字体大小，而 Rems 则相对于根元素（即 html 元素）的字体大小。这意味着我们可以通过设置父元素或根元素的字体大小，来控制整个网页的字体大小。
如何使用 Ems 和 Rems
设置根元素字体大小
我们可以使用 CSS 的 font-size 属性来设置根元素的字体大小。一般情况下，我们将它设置为 16px，这是浏览器默认的字体大小。但是在响应式设计中，我们可以根据屏幕尺寸来设置不同的根元素字体大小。
html {
font-size: 16px;
}使用 Ems
使用 Ems，我们可以将字体大小设置为相对于父元素的字体大小的倍数。例如，如果父元素的字体大小为 16px，我们可以将子元素的字体大小设置为 1.5em，这样子元素的字体大小就是 24px。
.parent {
font-size: 16px;
}
.child {
font-size: 1.5em; /* 字体大小为父元素的 1.5 倍，即 24px */
}使用 Rems
使用 Rems，我们可以将字体大小设置为相对于根元素的字体大小的倍数。例如，如果根元素的字体大小为 16px，我们可以将子元素的字体大小设置为 1.5rem，这样子元素的字体大小就是 24px。
html {
font-size: 16px;
}
.child {
font-size: 1.5rem; /* 字体大小为根元素的 1.5 倍，即 24px */
}如何应对响应式设计
在响应式设计中，我们需要根据不同的屏幕尺寸和设备类型，为网页设置不同的字体大小。我们可以通过媒体查询和 JavaScript 来实现。
媒体查询
使用媒体查询，我们可以根据屏幕尺寸和设备类型来设置不同的根元素字体大小。例如，我们可以将根元素字体大小在不同的屏幕宽度下设置为不同的值。
-- -------------------- ---- -------
-- --- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ---- --
------ ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- -----
-
-
-- --- --
------ ------ --- ----------- ------- -
---- -
---------- -----
-
-JavaScript
使用 JavaScript，我们可以根据屏幕尺寸和设备类型来动态地设置根元素字体大小。例如，我们可以在页面加载时获取屏幕宽度，并根据宽度设置根元素字体大小。
-- -------------------- ---- ------- -------- ----------------- - --- ----------- - ------------------ --- ------------ - ----------- - --- -- ---------- ---- --------------------------------------- - ------------ - ----- - ------------------ --------------------------------- ---------- - ------------------ ---
在上面的代码中，我们假设每个字符的宽度为 20px，并将屏幕宽度除以 20 得到根元素字体大小。在页面加载时和窗口大小改变时，都会调用 setRootFontSize 函数来设置根元素字体大小。
总结
在本文中，我们介绍了 Ems 和 Rems 的使用方法，并详细讲解了如何在响应式设计中应用它们。通过设置根元素字体大小和使用媒体查询或 JavaScript，我们可以根据不同的屏幕尺寸和设备类型，为网页设置不同的字体大小。希望本文能够对你在响应式设计中正确地使用 Ems 和 Rems 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65843023d2f5e1655def0d61