一行代码让rem自适应屏幕

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$。得出 $100vw/x=1920/20$，则 $x=100vw/96$,具体情况就按照UI的设计图计算一下。
示例：

html{
	font-size:calc(100vw / 96);
}

这样页面的所有宽度都会随着屏幕的变化而变化了

如果担心屏幕太大，导致大屏幕中的字体会变得特别大，这时候就可以用媒体查询

@media screen and (min-width: 1920px){
	html{
		font-size:20px;
	}
}

3.示例Gif图