移动端的适配 rem 适配

移动端的适配方案：

1. flex + rem单位 做适配效果 （比如淘宝和小米移动端）

2. flex + vw/vh单位 做适配效果 （比如 B站移动端 ）

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

rem 适配

rem 单位

rem 是一个相对单位，1rem 就是 html 文字的大小

比如

 html {
     font-size: 35px;
 }

则此时 1rem 就是 35像素。

媒体查询（了解）

媒体查询 mediaquery 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 ，就完成了适配

语法：

 ​
 @media (width:375px) {
     html {
         font-size: 40px;
     }
 }
 ​
 @media (width:320px) {
     html {
         font-size: 30px;
     }
 }

综合：

 ​
 @media (width:375px) {
     html {
         font-size: 37.5px;
     }
 }
 @media (width:414px) {
     html {
         font-size: 41.4px;
     }
 }
 ​
 ​
 .box {
     width: 5rem;
     height: 5rem;
     background-color: pink;
 }

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

这个也是值得提倡使用的一种方式。

有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。