前言
在移动互联网时代，越来越多的人使用手机或平板电脑上网，这些设备的屏幕尺寸和分辨率千差万别，因此需要一种适应各种屏幕的布局方案。响应式设计就是一种流行的解决方案，本文将介绍如何使用 Rem 实现响应式设计。
什么是 Rem？
Rem，意为 “root em”，是一种相对于根元素的单位，它是一种动态的单位，可以根据根元素字体大小的变化而变化。举个例子，如果根元素字体大小为 16px，那么 1rem 就等于 16px，如果将根元素字体大小设置为 18px，那么 1rem 就等于 18px。
Rem 的好处在于可以方便地进行响应式设计，因为它是相对于根元素而言的，而根元素的大小可以通过媒体查询来进行调整，从而实现不同屏幕尺寸的布局调整。
如何使用 Rem 实现响应式设计？
下面给出一个简单的示例，假设我们需要在大屏幕上显示两列，而在小屏幕上只显示一列。
首先，在 HTML 中设置根元素的字体大小为 16px：
-- -------------------- ---- -------
------
------
----- ----------------
--------- --- ---------------
-------
---- -
---------- -----
-
--------
-------
------
---- ------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
-------
-------然后，我们可以使用媒体查询，在小屏幕时将根元素字体大小调整为 14px，从而让所有元素都按照比例缩小：
@media screen and (max-width: 768px) {
html {
font-size: 14px;
}
}最后，我们可以使用 Rem 单位来设置元素的宽度，例如，将每个 item 的宽度设置为 30%：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------ ---- -------- ----- ----------- ----------- ----------- ------- -------------- ----- -
这里的 30% 对应的是根元素字体大小为 16px 时的宽度，而在小屏幕时，它会按照比例缩小，从而达到响应式的效果。
总结
本文介绍了如何使用 Rem 实现响应式设计，通过设置根元素字体大小，利用 Rem 单位来设置元素尺寸，以达到适应不同屏幕的布局效果。在实际应用中，可以结合媒体查询和 Flex 布局等技术，来实现更加复杂的响应式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479c7b8968c7c53b05bc30b