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布局的原理解析