CSS---rem用法

最新推荐文章于 2024-04-13 19:57:22 发布

maidu_xbd

最新推荐文章于 2024-04-13 19:57:22 发布

阅读量910

点赞数

分类专栏： CSS 文章标签： rem

本文链接：https://blog.csdn.net/maidu_xbd/article/details/97105662

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

选择PX为单位存在如下问题：px大小固定，不能随着浏览器窗口的大小变化

rem（font size of the root element）是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。rem可以在用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮

浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。也可以自己调整rem和px的比例关系。

示例如下：

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

<head>
    <meta charset="UTF-8">
    <title>rem的使用</title>
    <style>
    /*
          1rem = 5px
          2rem = 10px
        */
    html {
        font-size: 5px;
    }

    body {
        font-size: 2rem;
    }

    #box1 {
        width: 10rem;
        height: 5rem;
        background-color: gold;
    }

    #box2 {
        width: 30rem;
        height: 15rem;
        background-color: pink;

        font-size: 4rem;
    }
    </style>
</head>

<body>
    <div id="box1">box1盒子的宽为50px；高为25px;字体大小为10px</div>
    <div id="box2">box2盒子的宽为150px；高为75px;字体大小为20px</div>
</body>

</html>

maidu_xbd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---rem用法

选择PX为单位存在如下问题：px大小固定，不能随着浏览器窗口的大小变化rem（font size of the root element）是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。rem可以在用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮浏览器的默认字体高都是16px。...
复制链接

扫一扫