1. 什么是移动适配

背景：当屏幕的宽度发生什么变化时，页面元素的尺寸由于设置了px为固定尺寸，会不动，出现多的间距

解决：屏幕的宽高发生变化时，页面元素的尺寸（宽度和高度）随之变化，达到自适应的效果，这样可以更好的达到适配效果，用户体验更好，就需要我们通过某种方法来实现移动适配

用百分比布局或者flex完成整体元素的排列布局
配合rem或者vw/wh设置元素的尺寸（宽高）最终适配

2. rem适配

rem是一个相对单位（根字号大小）全称 font size of the root element,中文名称根字号，rem单位是相对于html标签的字号计算结果

1rem=1html字号大小

使用rem优势：父元素的字号大小不一致，但整个页面只有一个html标签，能够很好地控制整个页面的元素大小

但是设置了rem之后不同的屏幕宽度，html字号大小固定未变，box的宽度仍然未变，可以使用媒体查询或者导入flexible.js文件来解决

2.1. 媒体查询

手机屏幕大小不同，分辨率不同，使用媒体查询media query设置差异化css样式，即不同的屏幕宽度设置不同的html根字号大小

         @media（视口/屏幕宽度）{
             选择器{
                 css属性
             }
             }
         @media（width:375px）{
             html{
                 font-size:37.5px;
             }
         }

css中使用媒体查询，根据不同的视口宽度，设置不同的根字号，就完成了适配，设备宽度大，元素尺寸大；设备宽度小，元素尺寸小

注释事项：

目前rem布局方案中，将网页均分成10份，html标签的字号为视口宽度的10分之一，比如375宽度，html根字号大小就是37.5px
在电脑桌面右键点击在显示设置中，屏幕的分辨率要改成100%才会有适配效果

2.2. px转换成rem

rem单位尺寸计算步骤：

确定设计稿对应的设备的html标签字号查看设计稿宽度-确定参考设备宽度（视口宽度）-确定基准根字号（视口宽度的1/10）
rem单位尺寸 rem单位的尺寸=px单位数值/基准根字号

         /* 媒体查询 */
         @media (width:375px) {
             html {
                 font-size: 37.5px;
             }
         }
         .box {
             /* 68px*68px转换成rem尺寸 */
             /* 68/37.5=1.8133333 */
             width: 1.8133rem;
             height: 1.8133rem;
             background-color: pink;
         }

后面不需要除，用less语法帮忙计算

2.3. flexible.js

使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比例缩放的效果这是开发中提倡的一种方式

flexible.js是淘宝开发出来的一个专门用来适配移动端的js库，核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size，去github下载就可以，引入后就不需要写这么多的媒体查询了js文件会自动检测当前html根字号的大小

底层原理就是window绑定onresize事件用来监听html对象的clientWidth大小（视口大小）

 <body>
     <div class="box"></div>
     <script src="./06-素材/js/flexible.js"></script>
 </body>

该js库可以检测视口宽度自动修改html的文字大小为当前屏幕的十分之一，例如加了flexible之后，屏幕为375px的屏幕的html文字大小为37.5px

用vue框架的时候还是写px就可以了，打包工具会自动帮我们转换成rem但是底层原理必须了解

引入之后只是知道到了不同屏幕宽度的1rem=多少px值，拿到设计稿375宽度之后，还需要定义一个值如37.5 通过less计算等到rem值

有一个基准的设计稿，就是iphone678的375px用来算出各长度的rem值

3. vw/vh适配

能够使用vw单位设置网页元素的尺寸，不需要去引入flexible.js文件，原理同rem一样，视口宽度等于屏幕尺寸

vw viewport width 1vw=1/100视口宽度
vh viewport height 1vh=1/100视口高度

实际开发中，vw和vh不可能一起混用，可能会出现盒子变形的结果

屏幕越大，宽度越高，1vw代表的px数越大

3.1. vw、vh适配原理

1vw等于视口宽度的1/100 以屏幕宽度375px为例,使用方法同rem差不多，使用步骤：

查看设计稿宽度-确定参考设备宽度（视口宽度）-确定vw尺寸（1/100视口宽度）
vw单位的尺寸=px数值/（1/100视口宽度）由less语法帮我们计算

一般采用sass或者less帮助我们计算rem或者vw/vh值，声明一个变量@rem=37.5rem,直接用px做除法也避免了单位换算的过程

4. rem和vw、vh的区别

rem市场比较常见：
- 需要不断修改html文字的大小
- 需要媒体查询media query
- 需要flexible.js -->
vw/vh是未来的趋势
- 省去各种判断和修改
- 代表的是b站

移动rem和vw/vh适配