《三》移动端适配方案

移动端适配：在不同规格的移动设备上，页面能够尽可能统一地显示效果。

PC 端存在的是不同浏览器的兼容问题；移动端存在的是不同机型的兼容问题。

viewport 是可以设置布局视口等于视觉视口，页面就不需要再缩小以适应屏幕大小了。
rem、vw 等是写一份代码，可以在不同大小的屏幕上使元素也显示不同的大小。例如：设置一个 100*100 的盒子，在 375px 的屏幕上显示是 100*100，在 414px 的屏幕上是 125*125 等。

移动端设计稿一般使用 iPhone8 的宽度 375px 作为基准值。

百分比：

所有需要动态调整的元素都使用百分比来设置。

这种方式的缺点是：因为不同属性的百分比值，相对的可能是不同的参照物，所以百分比往往很难统一，因此百分比在移动端适配中时很少使用的。

媒体查询：

早期的布局方式，主要是通过查询设备的宽度来执行不同的 CSS 代码。

这种方式的缺点是：

1. 根据屏幕大小划分了区间，但是在区间内无法再进行区分，无法实现 100% 兼容。
2. 响应式布局的工作都是需要开发者去实现的，带来了额外的开发量。
3. 不适合功能复杂的页面。

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

rem 单位 + 动态的 html 的 font-size（已过时）：

rem 单位是相对于 html 元素的 font-size 来设置的（1rem = html 元素的 font-size），因此，如果需要在不同的屏幕下元素显示不同的大小，只需要：

1. 针对不同的屏幕大小，动态地设置 html 元素的 font-size 。
2. 使用 rem 作为单位来设置元素的大小。

视口的宽度影响根节点的字体大小， 根节点的字体大小影响元素的大小。
此处有两个比值关系：

1. 视口的宽度 / 10 = 根节点的字体大小：10 （或者任意数字）这一个比值是固定的，任何屏幕都需要经过这一步来计算得出根节点的字体大小。
2. 1rem = 根节点的字体大小，根据根节点的字体大小计算出元素的 rem 值，这一比值也是固定的。
   因此，实际开发中，只需要根据 UI 给的设计稿确定出一版的值（即设计稿这一版的值）即可。之后遇到不同大小的屏幕，会根据比值关系自动调整根节点的字体大小，元素的大小也就会跟着改变了。

针对不同的屏幕大小，动态地设置 html 元素的 font-size：

有以下几种方案：

1. 媒体查询：可以通过媒体查询来设置不同大小范围的屏幕的 html 的 font-size 尺寸。这种方式的缺点是：需要针对不同的屏幕大小编写大量的媒体查询；只能设置一定的范围，而不能根据屏幕大小的变化实时地变化元素的大小。
2. 通过 JS 动态地计算：可以监听屏幕大小的实时改变，根据 html 元素的宽度计算出 font-size 的大小，然后设置到 html 元素上。

3. 直接引入淘宝开发的第三方库 lib-flexible 即可实现（推荐）。

计算元素的 rem 值：

1. 手动计算：元素的 rem 值= 元素的 px 值 / 根节点的字体大小。

   如果使用 VSCode 编辑器开发的话，可以安装一款插件来协助计算转换后的 rem 值。
   
   

2. 使用 postcss 的 pxtorem 插件：开发过程中照旧使用 px 像素即可，在打包时借助 Webpack 可以完成单位的自动转化（推荐）。

vw 单位（最推荐）：

vw 自身将整个可见视口横向分成了 100 份，每一个份就是 1vw。使用 vw 单位只需要考虑一个问题，就是如何将尺寸换算成 vw 单位即可。

实际开发中，只需要根据 UI 给的设计稿确定出一版的值（即设计稿这一版的值）即可。之后遇到不同大小的屏幕，会根据屏幕大小和已经计算出的 vw 的值自动调整元素的大小。

vw 相比于 rem 的优势：

1. 不再需要去计算和设置 html 的 font-size 。
2. 不再需要因为设置了 html 的 font-size ，而必须给 body 设置一个 font-size，以防止继承导致元素的 font-size 大小异常。
3. 因为不依赖 font-size，所以不需要担心某些原因 html 的 font-size 被篡改导致页面尺寸混乱。
4. vw 相比于 rem 更加语义化，就是指 viewport 视口宽度的 1%。
5. vw 具备 rem 的所有优点。

1. 手动计算：以 375px 的设计稿为标准，1vw = 3.75px，因此，元素的 vw 值 = 元素的 px 值 / 3.75 px。

   如果使用 VSCode 编辑器开发的话，可以安装一款插件来协助计算转换后的 vw 值。
   
   

2. 使用 postcss-px-to-viewport-8-plugin 插件：开发过程中照旧使用 px 像素即可，在打包时借助 Webpack 可以完成单位的自动转化（推荐）。

   • 通过 npm 安装：npm i postcss-px-to-viewport-8-plugin -D。
   • 在根目录下面新建 postcss.config.js 进行配置。

     module.exports = {
       plugins: {
     	postcsspxtoviewport({
             unitToConvert: 'px', // 需要转换的单位，默认为"px"
             viewportWidth: 375, // 设计稿的视口宽度
             unitPrecision: 5, // 单位转换后保留的精度
             propList: ['*'], // 能转化为vw的属性列表
             viewportUnit: 'vw', // 希望使用的视口单位
             fontViewportUnit: 'vw', // 字体使用的视口单位
             selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
             minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
             mediaQuery: false, // 媒体查询里的单位是否需要转换单位
             replace: true, //  是否直接更换属性值，而不添加备用属性
             exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
             include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
             landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
             landscapeUnit: 'vw', // 横屏时使用的单位
             landscapeWidth: 1920 // 横屏时使用的视口宽度
           })
         }
       }
     };