1、概念
em作为font-size的单位时,其代表父元素的字体大小,em作为其他属性单位时,代表自身字体大小
rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小
优缺点:em就是为字体和行高而生的,有些时候子元素字体就应该相对于父元素,元素行高就应该相对于字体大小;而rem的有点在于统一的参考系
2、Rem布局原理
rem布局的本质是等比缩放,一般是基于宽度
3、比Rem更好的方案
vw —— 视口宽度的 1/100;vh —— 视口高度的 1/100
4、Rem的问题
1、首先是字体的问题,字体大小并不能使用rem,字体的大小和字体宽度,并不成线性关系,所以字体大小不能使用rem;由于设置了根元素字体的大小,会影响所有没有设置字体大小的元素,因为字体大小是会继承的
解决方案:在body中修正
追问 : 字体的大小如何实现响应式
通过修改body字体的大小来实现,同时所有设置字体大小的地方都是用em单位,对就是em,因为只有em才能实现,同步变化,我早就说过em就是为字体而生的
@media screen and (min-width: 320px) {
body {font-size: 16px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
body {font-size: 18px}
}
@media screen and (min-width: 641px) {
body {font-size: 20px}
}
p {font-size: 1.2em}
p a {font-size: 1.2em}
2、如果用户在PC端浏览,页面过宽怎么办?
一般我们都会设置一个最大宽度,大于这个宽度的话页面居中,两边留白
var clientWidth = document.documentElement.clientWidth;
clientWidth = clientWidth < 780 ? clientWidth : 780;
document.documentElement.style.fontSize = clientWidth / 100 + 'px';
设置body的宽度为100rem,并水平居中
body { margin: auto; width: 100rem }
3、如果用户禁用了js怎么破?
首先可以添加noscript标签提示用户
<noscript>开启JavaScript,获得更好的体验</noscript>
给html添加一个320时的默认字体大小,保证页面可以显示
html {fons-size: 3.2px}
如果你想要更好的体验,不如添加媒体查询吧
@media screen and (min-width: 320px) {
html {font-size: 3.2px}
}
@media screen and (min-width: 481px) and (max-width:640px) {
html {font-size: 4.8px}
}
@media screen and (min-width: 641px) {
html {font-size: 6.4px}
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">