JavaScript-rem布局

article/2025/9/16 22:29:31

JavaScript-rem布局

一、什么是Rem

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,有些人提出用em来做弹性布局页面，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值。

在这里插入图片描述

二、举例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>*{margin: 0;padding: 0;}.d1 {width: 5rem;height: 5rem;background-color: pink;}</style></head><body><div class="d1"></div><script>/* Rem布局 同比例的窗口放大和缩小1.设计师设计的设计稿 1000px2.因为设备不同，或者浏览器分辨率不同需要在不同的分辨率下打开3.屏幕大小是1000px  1000px 1rem == 100px(设计稿的),10rem就会刚刚好占满整个屏幕的宽度4.屏幕大小是500px     1rem大小等于50px  保证10rem5.如果750就设计为screenWidth/7.5*/window.onresize = function() {setRem();};function setRem() {var screenWidth = window.innerWidth;var danwei = screenWidth / 10;var html = document.querySelector("html");html.style.fontSize = danwei + "px";}setRem();</script></body>
</html>