使用 rem 进行字体大小设置

by zhuzhenPosted on

◆ em单位

1em 等于 10px，而不是默认的 16px。要将字体大小设置为相当于 14px 的大小，将其设置为 1.4em。

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

基于 em 的字体大小的问题在于字体大小会复合。这些问题可以通过声明任何子元素使用 1em 来解决，从而避免复合效应。

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

其中font-size:62.5%; 将 <body> 元素的字体大小设置为默认字体大小的 62.5%。在大多数浏览器中，默认字体大小是 16px，所以此时 <body> 元素的字体大小为 16px * 62.5% = 10px。这么做的目的是为了方便后续使用 em 单位进行字体大小计算，因为以 10px 为基础，换算成 em 单位时更直观，例如 20px 就是 2em。

◆ rem单位

em 单位相对于父级的字体大小，这会导致复合问题。rem 单位相对于根或 html 元素。这意味着我们可以在 html 元素上定义单个字体大小，并将所有 rem 单位定义为其中的百分比。

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

对于不支持 rem 单位的浏览器我们该怎么办呢？可以使用 px 指定回退方案。首先使用 px 单位指定字体大小，然后再使用 rem 单位重新定义它。

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

其中

♦  rem单位的优点

◆ 响应式设计友好

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 根据屏幕宽度设置根元素字体大小 */
        @media (max-width: 768px) {
            html {
                font-size: 14px;
            }
        }

        @media (min-width: 769px) {
            html {
                font-size: 16px;
            }
        }

        h1 {
            font-size: 2rem; /* 字体大小为根元素字体大小的 2 倍 */
        }

        p {
            font-size: 1.2rem; /* 字体大小为根元素字体大小的 1.2 倍 */
        }
    </style>
</head>

<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>

</html>

在这个示例中，通过媒体查询根据屏幕宽度设置根元素 <html> 的字体大小。当屏幕宽度小于等于 768px 时，根元素字体大小为 14px；当屏幕宽度大于 768px 时，根元素字体大小为 16px。标题 <h1> 和段落 <p> 的字体大小使用 rem 单位，会根据根元素字体大小的变化而自动调整，从而实现了响应式设计。

◆ 方便无障碍访问

如：用户将浏览器的字体缩放比例调整为 150%，根元素的字体大小会相应增大，使用 rem 单位设置字体大小的元素也会按比例增大，确保用户能够清晰地阅读内容。

◆ 便于维护和调整

要将整个网站的字体大小整体增大，只需要将根元素 <html> 的 font-size 属性值调大，比如从 16px 调整为 18px，那么所有使用 rem 单位的元素字体大小都会相应增大，无需逐个修改每个元素的字体大小。