Rem布局的原理解析

原创已于 2022-05-10 12:09:02 修改 · 909 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-05-09 22:05:05 首次发布

本文解析了CSS中em和rem单位的区别，强调了rem布局的核心是等比缩放，用于实现页面自适应。通过调整html字体大小，根据设备宽度与设计稿比例设置font-size，确保元素尺寸按比例缩放。同时推荐了一个VSCode插件，帮助快速转换px到rem。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是em

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

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

举例说明：

<div class="p1">
    <div class="s1">1</div>
    <div class="s2">1</div>
</div>
<div class="p2">
    <div class="s5">1</div>
    <div class="s6">1</div>
</div> 

.p1 {font-size: 16px; line-height: 32px;}
.s1 {font-size: 2em;}
.s2 {font-size: 2em; line-height: 2em;}

.p2 {font-size: 16px; line-height: 2;}
.s5 {font-size: 2em;}
.s6 {font-size: 2em; line-height: 2em;}

答案：

先来看第一组的答案

p1：font-size: 16px; line-height: 32px
s1：font-size: 32px; line-height:32px
s2：font-size: 32px; line-height: 64px

和你的答案一样吗？下面来解释下

p1 无需解释
s1 em作为字体单位，相对于父元素字体大小；line-height继承父元素计算值
s2 em作为行高单位时，相对于自身字体大小

再来看看第二组的答案

p2：font-size: 16px; line-height: 32px
s5：font-size: 32px; line-height: 64px
s6：font-size: 32px; line-height: 64px

意不意外？惊不惊喜？下面来解释下

p2 line-height: 2自身字体大小的两倍
s5 数字无单位行高，继承原始值，s5的line-height继承的2，自身字体大小的两倍
s6 无需解释

Rem是什么

rem布局的本质是什么？这是我问过很多人的一个问题，但得到的回答都差强人意。

其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊

假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比

需要了解的知识

html{font-size:16px}
p{font-size:1rem}
1rem = 16px;

实现原理

有了这个以上的前提可以通过监测屏幕大小改变html的字体大小，从而实现自适应大小的效果；

获取设备宽度与设计稿宽度的比例作为html font-size的大小；
假如是750/750 那么font-size：1px;设计稿上200px,代码就要写200rem;这样写太大.
通常750/750*100,多除100；100作为px转化为rem的换算比例，100px = 1rem;那么设计稿750px代码里就要写7.5rem;

function getRem () {
  var html = document.getElementsByTagName("html")[0];
  var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
  var rem = deviceWidth / designWidth * 100;
  console.log(rem)
  html.style.fontSize = rem+ "px";
}

设计稿为750px时，html{font-size:50px;} 50px * 7.5 = 375px;正好是设备的宽度；
当设计稿750px,设备320px时， 320/750100 = 42.6666667;42.66667 7.5 = 320px;
所以当设备为375时 7.5rem是maxWidth,设备是320时，7.5rem也是maxWidth，这样就达到了自适应设备的目的；

完整代码：

(function (designWidth,n) {
  function getRem () {
    var html = document.getElementsByTagName("html")[0];
    var deviceWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var rem = deviceWidth / designWidth * n;
    console.log(rem)
    html.style.fontSize = rem+ "px";
  }
  getRem ()
  window.addEventListener('resize',function (){
    getRem()
  })
})(750,100)

在开发过程中我们需要把ui图的px尺寸换算成rem值，对于数学不及格的我们也是耽误时间的事，这里我推荐vscode中的一个插件，安装后就输入px值可自动换算成rem，px2rem的默认基数是16，这个可以根据自己的个人便好修改，我设置的是50
在这里插入图片描述