rem自适应布局

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位，若根元素字体大小为16px，1rem就等于16px。

应用

若我们拿到的设计稿的宽度为100px，根元素字体大小为20px，可以设置5rem为我们页面的宽度， 20px * 5 ==100px，如果在别的分辨率的设备下也想占满宽度，就可以动态根据根元素宽度来设置根元素字体大小，比如想在200px的设备下显示，可以把font-size设为40px，40px * 5 = 200px，这样就可以实现不改变页面上css，动态计算根元素字体大小来实现自适应布局

实现

根元素宽度除以设计稿宽度乘上自己设置的倍数

<script>
   //fontSizt计算
   document.documentElement.style.fontSize = document.documentElement.clientWidth/375
 * 16 +'px';
</script>

VSCode可以下载这个插件设置比例，使用更方便