html rem

作者：疯狂灭世发布日期:2025-04-18 浏览:47

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML REM 示例</title>
    <style>
        /* 设置根元素字体大小，作为rem单位的基础 */
        html {
            font-size: 16px;
        }

        /* 使用rem设置元素的字体大小和间距 */
        body {
            font-size: 1rem; /* 等于根元素的字体大小 */
            line-height: 1.5rem; /* 行高为根元素字体大小的1.5倍 */
        }

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

        p {
            font-size: 1.2rem; /* 等于根元素字体大小的1.2倍 */
        }
    </style>
</head>
<body>
    <h1>这是一个使用 rem 单位的标题</h1>
    <p>这是一个使用 rem 单位的段落。rem 是一个相对单位，相对于根元素（html）的字体大小。</p>
</body>
</html>

解释说明：

html 标签设置了 font-size: 16px，这是整个页面的基础字体大小。
rem 单位是相对于根元素 (<html>) 的字体大小来计算的。
在 body 中，font-size: 1rem 表示字体大小等于根元素的字体大小（即 16px）。
h1 和 p 标签中的字体大小分别设置为 2rem 和 1.2rem，表示它们分别是根元素字体大小的 2 倍和 1.2 倍。
使用 rem 可以方便地根据根元素的字体大小进行缩放，适合响应式设计。

上一篇：html搜索框

下一篇：html里面display