@media (min-width: 400px){
.app {
width: 400px;
height: 400px;
background-color: green;
}
} 我们知道，px是一个绝对单位，写死了就不会变，那我们有没有一个相对单位来给它进行长度和宽度的赋值呢？那就是rem了没得说了。
rem 是 CSS 中的一个长度单位，全称为 "root em"，它代表相对于 HTML 文档根元素（即 <html> 元素）的字体大小。rem 单位结合了绝对单位和相对单位的优点，提供了一种灵活的方式来设置字体大小和其他尺寸，同时保持整体设计的一致性和可扩展性。
rem的特点：其单位是相对于根元素，通常是html的字体大小，还有全局一致性,由于 rem 是相对于根元素的，所以你只需要在一个地方（通常是全局样式表的开始处）设置根元素的字体大小，就可以影响到整个页面中所有使用 rem 的元素。
.app {
width: 10rem;
height: 10rem;
background-color: red;
}
@media (min-width: 400px){
html{
font-size: 20px;
}
}优雅的适配封装
(function(doc){
let docEl = doc.documentElement; // 获取根节点的html
doc.addEventListener('DOMContentLoaded',recalc)
function recalc(){
let width = docEl.clientWidth;
docEl.style.fontSize = 20 * (width / 320) + 'px';
}
})(document)-
获取
<html>元素的可视宽度（不包括滚动条），存储在width变量中。 -
根据
width计算新的字体大小。这里使用了一个公式20 * (width / 320)，意味着当宽度为320px时，根元素的字体大小为20px；宽度增加时，字体大小按比例增加。 -
将计算出的字体大小设置为
<html>元素的style.fontSize属性，单位为px
最后我们将这个做好的适配封装代码引入项目全局去使用就好了。
