rem - xiaoxustudy - 博客园

rem

目录：1. 概念 2.使用 3.例子

一、概念

　　rem 可以在用户浏览网页时，根据屏幕的尺寸来向用户展示更适合用户的布局、文字、图片、按钮。

　　rem(font size of the root element)是相对于根元素的字体大小的单位。

　　一旦根节点 html 定义的 font-size 变化，那么整个网页中运用到 rem 的也会随之变化。

二、使用

　　浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合 1rem=16px，那么 12px=0.75rem, 10px=0.625rem。

　　重新计算那些被放大的字体 rem 数值，避免字体大小的重复声明。

　　目前 PC 端开始普遍使用 rem，移动端基本完全使用。

三、例子

先用 px 设置字体大小。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            html{
                font-size: 16px;
            }
            #box1{
                width: 300px;
                height: 200px;
                background-color: skyblue;
            }
            #box2{
                width: 200px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="box1">box1</div>
        <div id="box2">box2</div>
    </body>
</html>

代码

rem(font size of the root element)是相对于根元素的字体大小的单位，浏览器默认字体大小为 16px，1rem=16px。

可以使用网络工具完成 px 跟 rem 的等值替换。我使用 www.freetechs.cn/tool/rem2px.html，在网上随意找的转换工具。

用等值替换为 rem 单位的代码替换原来的代码，页面表现与原来一样。

一旦根节点 html 定义的 font-size 变化，那么整个网页中运用到 rem 的也会随之变化。

例如，如果根节点中的 font-size 改为 20 px，那么 rem 会随之变化，变为 1rem = 20px。

一般会将根节点 html 定义的 font-size 设置为 10px ，因为 1rem=10px 方便换算。

文字大小也可以用 rem 设置，同样地，一旦根节点 html 定义的 font-size 变化，那么用 rem 设置的字体大小也会改变。

posted on 2020-08-03 15:46 xiaoxustudy 阅读(444) 评论(0) 收藏举报

刷新页面返回顶部