移动端的布局方案

1、使用 媒体查询+rem单位

原理：利用媒体查询检测设备的特性，根据设备来改变根节点的字体大小
实现步骤：
（1）通过媒体查询来改变根节点的字体大小

@media all and (min-width: 320px) {
     html {
            font-size: 32px;
        }
}
@media all and (min-width: 375px){
    html{
        font-size: 37.5px;
    }
}

（2）页面当中元素的布局都用rem单位，就能达到适配的状态

div {
    width: 10rem;
    height: 100px;
    background: red;
}

缺点：不能精细的适配到每一个设备，代码量较大
具体详解点击查看

2、使用vw单位 + rem单位布局

原理：屏幕大小变化的时候，用vw作为单位的值也会跟着改变，用vw作为根节点的字体大小的单位，所以在不同的屏幕大小或者设备中，根节点的字体大小的值就不一样，rem单位得到的值就不一样
实现步骤：
（1）使用vw单位作为 HTML font-size的单位（计算）

  //  如果设计图为750px，那么我们需要设置一下代码
    	html{
    	  font-size: 13.33333333vw
    	}

（2）页面所有布局使用rem单位

div{
  //这样我们写1rem即为设计稿上的100px
	width:1rem; // 在页面中显示的值为 50px
	height:1rem;
}

问题：为什么根节点字体大小为写13.33333333vw，为什么100px = 1rem?
750px = 100vw
1px = 100 / 750 = 0.133333333333333vw
100px = 0.133333333333333vw *100px = 13.33333333vw
rem的 值是根据 跟根节点的字体大小来计算的，设置根节点的字体大小为100px，是为了方便计算

最终于得出 100px = 1rem

3、使用js + rem单位布局

原理：通过js获取设备的宽度，来计算根节点的字体大小，rem得出来的值就不一样，就到达不同页面能适配
我们可以在编辑器里面安装一个扩展插件来自动计算px---->rem
（1）在vscode的扩展里面安装插件：cssrem
（2）然后在vscode配置文件中更改：rootfontsize为设计图 / 10的数字
（3）在页面中使用script标签引入获取设备的特性更改根节点地质体大小的 js文件
（4）在页面中的所有布局都用rem作为单位，设计图量处的值为多少就写多少，但是要选择转换成rem的那个值

4、使用sass + vw单位布局

原理：使用vw作为页面所有元素的布局单位，简化之前rem + vw结合的布局
（1）使用sass的函数：

@function vw($px) {
    @return ($px / 设计图的宽度) * 100vw;
}

（2）页面中布局

header {
	 height: vw(量出来的值);
  	background: green;
 	 font-size: vw(48);
}