rem是一个非常好用的长度单位,但是网上介绍的方法主要是通过js获取屏幕宽度,或者通过CSS的媒体查询来设置html的 font-size
的大小,总的来说方法不够优雅
1.使用的长度单位rem、vw
rem
这个单位代表根元素的 font-size
大小(一般来说是html
元素的font-size
)。当用在根元素的font-size
上面时 ,它代表了它的初始值。
vw
1vw
就是屏幕宽度的百分之一,窗口放大或缩小1vw
的值也会变化。
2.使用方法
假设UI设计稿的宽度是1920px,html
的font-size
想要设置为20px,设以rem为单位font-size
大小为
x
x
x。得出
100
v
w
/
x
=
1920
/
20
100vw/x=1920/20
100vw/x=1920/20,则
x
=
100
v
w
/
96
x=100vw/96
x=100vw/96,具体情况就按照UI的设计图计算一下。
示例:
html{
font-size:calc(100vw / 96);
}
这样页面的所有宽度都会随着屏幕的变化而变化了
如果担心屏幕太大,导致大屏幕中的字体会变得特别大,这时候就可以用媒体查询
@media screen and (min-width: 1920px){
html{
font-size:20px;
}
}