rem布局

最新推荐文章于 2024-04-29 11:17:53 发布

一只认学的程序猿

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量2.2k

点赞数 2

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/weixin_41706310/article/details/108866598

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

rem

r–代表root根，也就是指html。
em–相对单位，也就是相对于html的字体大小单位。
没有设定html大小的情况下，1rem=16px，因此下方的div为160px*160px

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            /* 在没有设定html的大小情况下,1rem=16px */
            font-size: 2rem;
        }
        
        div {
            width: 10rem;
            height: 10rem;
            background-color: royalblue;
        }
    </style>
</head>

<body>
    <!-- 
        rem: r --root根  em--相对单位  也就是相对于HTML的字体大小单位，可以用于任何设定长度的单位
     -->
    <h1>hellowworld</h1>
    <div></div>
</body>

</html>

rem的应用

比如说，现在有一个设计稿1000px。
因为每个人打开的时候，设备不同，或者浏览器设定的分辨率不同，使得需要在不同分辨率下打开。
假定屏幕大小为1000px，我们需要10rem来铺满整个屏幕，只需要设定1rem=100px；
若屏幕大小为500px，依然需要10rem来铺满屏幕，则设定1rem=50px。
所以，用js来动态计算单位rem换算成px后的大小，就可以实现rem布局。如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1 {
            width: 5rem;
            height: 5rem;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="d1"></div>

    <script>
        var html = document.querySelector('html');

        function setRem() {
            var screenWidth = window.innerWidth; //获取屏幕宽
            var rem1 = screenWidth / 10; //屏幕的宽度/设计稿占满全屏幕所需的rem数量，就可以得到1rem为多少像素。
            html.style.fontSize = rem1 + 'px';
        };
        setRem();
        window.onresize = function() {
            setRem();
        }
    </script>
</body>

</html>

上面代码中的div，永远都会占屏幕一半的宽度。

一只认学的程序猿

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
rem布局

remr–代表root根，也就是指html。em–相对单位，也就是相对于html的字体大小单位。没有设定html大小的情况下，1rem=16px，因此下方的div为160px*160px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫