Rem布局的原理解析

本文解析了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
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值