JavaScript学习笔记——rem布局

最新推荐文章于 2022-08-01 12:26:02 发布

希魔王的塔罗牌

最新推荐文章于 2022-08-01 12:26:02 发布

阅读量263

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Nozomi0609/article/details/108560166

版权

rem

rem：

r代表root，rm相对单位，相当于HTML的字体大小单位，可以用于任何设定长度的单位

举例：

设计师设计网站的设计稿：1000px
每个人打开网页的时候设备不同，分辨率不同，需要在不同的分辨率下适应大小
屏幕大小，1000px，如果设置 1 rem = 100px，10 rem刚好占满整个屏幕宽度
屏幕大小，500px，如果设置 1 rem = 50px，10 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>
            *{
                margin: 0;
                padding: 0;
            }
            #d1{
                width: 5rem;
                height: 5rem;
                background-color: aqua;
                font-size: 1rem;
            }
        </style>
	</head>
	<body>
        <div id="d1">
            helloworld
        </div>
		<script>
			window.onresize = function () {
                setRem();
            };

			function setRem() {
				var screenWidth = window.innerWidth;
				var danwei = screenWidth / 10;
				//屏幕宽度/设计稿占满全屏的宽度是多少rem
				//如果设计稿是750，就可以除以7.5，保证1 rem = 100px，方便计算 
				var html = document.querySelector("html");
				html.style.fontSize = danwei + "px";
            }
            
            setRem();
		</script>
	</body>
</html>