移动端开发要求内容文字随屏幕的变化而改变，而一般的流式布局和flex布局主要针对的是宽度变化，怎样让屏幕发生变化时元素内容的宽高等比例缩放。
目前使用较多的是rem,它是一个相对单位，是相对于htnl元素的字体大小。它的优点就是可以通过html的文字大小改变页面中元素大小来整体控制。
整体控制需要用到媒体查询技术media,可以根据不同的尺寸改变不同的样式。
其中，最常用的是width,max-width,min-width.
/* 从大往小写，下面的样式会覆盖上面的样式 */
@media screen and (max- 800px) {
body {
background-color: slateblue;
}
}
@media screen and (max- 600px) {
body {
background-color: springgreen;
}
}
@media screen and (max-300px) {
body {
background-color: tomato;
}
}
通常把不同尺寸的样式单独抽离出来，需要的时候才调用
1.通过<link>标签
<link rel="stylesheet" href="style320.css" media="screen and (min-320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-640px)">
2.通过@import
@import url('./style320.css') screen and (min- 320px);
@import url('./style640.css') screen and (min- 640px);
使用媒体查询根据不同比例设置HTML元素大小，页面元素使用rem为单位，从而达到等比缩放的适配。