【CSS】深入探究rem响应式原理
发布网友
发布时间：2023-05-11 20:25
共1个回答
热心网友
时间：2024-04-27 02:20
em：作为font-size单位时，其代表父元素字体大小，作为其他属性（line-height）单位时，代表自身字体大小
例：
<div style="font-size:16px">
<div style="font-size:2em;line-height:2em"></div>
</div>
第二个div的font-size:2em=2 16px=32px
line-height:2em=2 32px=64px
rem：作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于其初始字体大小(浏览器默认字体大小)
例：
html{font-size:2rem} 2 16px=32px
p{font-size:2rem} 2 32px=64px
综上，em是为字体和行高而生的，有时候子元素字体就应该与父元素相关。而rem布局的本质是等比例缩放
①让根元素的字体与屏幕宽度产生关系，即随屏幕宽度变化而变化
②其他元素的大小根据根元素字体生成rem单位，例如：
html{font-size:width/100},假设设置根元素字体为屏幕宽度的1%，（注意：屏幕宽度是动态变化的），则屏幕宽度的1%就代表1rem。假设现在有p元素，我们就可以作如下设置：
p{width:5rem;},则p的宽度就为屏幕的5%
现在你明白rem的原理了吧，那如何动态获取屏幕宽度呢？这里我们介绍两种方法：
①通过js设置
window.onload=function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/100 +'px'
}
这样就实现了设置根元素的字体大小为屏幕宽度的1%
②vw
CSS3引进了vw vh的概念，vw是指视口宽度的1%；vh是指视口高度的1%。因此我们就可以直接作如下设置：
p{width:5vw}
vw缺点就是兼容性没有rem好
rem是弹性布局的一种实现方式，强调的是等比例缩放，弹性布局是响应式的一种。响应式布局强调的是不同屏幕要有不同的显示（例如我有行照片墙，在PC iPad 手机都一行展现不同的数目，你可能会想到flex）
①字体不能用rem
字体不是线性关系，设置了根元素字体大小，会影响所有没设置字体大小的元素，因为 字体会继承
字体如何实现响应式：通过body字体的大小来实现，同时所有设置字体的地方都用em，例：
body{font-size:16px;}
p{font-size:1.2em;}
但是我们一般遇到的设备有手机、iPad、电脑，如果想要实现不同宽度字体显示大小不一样，可以使用媒体查询：
@media screen and (min-width:320px){
body{font-size:16px;}
}
@media screen and (min-width:480px){
body{font-size:18px;}
}
@media screen and (min-width:960px){
body{font-size:20px;}
}
②根元素字体小于浏览器默认字体
假设屏幕宽度是780px，html字体大小780/100=7.8px，小于浏览器默认字体16px，怎么办。这个时候可以设置html字体大小780/10=78px,则其他元素的参考1rem就是屏幕宽度的1/10，再根据这个参考系来计算。其实道理是一样的
参看链接：
① Rem布局的原理解析
