移动端适配

这篇文件是以应用的角度介绍如何使用vue（使用vue-cli创建项目）来设置响应式布局，让我们能更便捷使用px去开发还原设计图，不必考虑过多的单位转换计算、适配等问题

设置viewport

设置布局窗口和视觉窗口一致，缩放比例都设为1，并且不允许缩放

• width=device-width: 表示让 布局视口 的宽度等于设备宽度
• initial-scale=1.0: 表示页面的初始缩放比例为1，让 视觉视口 等于 理想视口
• maximum-scale=1.0,minimum-scale=1.0：表示页面的最大/最小缩放比为1
• user-scalable=no 表示不允许用户对页面进行缩放操作

移动端布局

这里采用的方案是将px转换成rem，在实战中，我们要学会使用工具来帮助快速开发，这里主要用两个插件amfe-flexible和postcss-pxtorem

• amfe-flexible：配置可伸缩布局方案，主要是将1rem设为viewWidth/10
• postcss-pxtorem：postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。

1. 在设置布局前，需要引入 reset.css 文件，用来消除不同设备的浏览器之间的差异

// main.js
import './assets/resset.css'

2. 安装postcss-pxtorem和amfe-flexible
npm install postcss-pxtorem amfe-flexible -D

3. 在main.js中引入amfe-flexible

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入 amfe-flexible
import 'amfe-flexible/index'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4. 在vue.config.js文件（如果没有，需要自己项目根目录手动创建）中对postcss-pxtorem配置
   pxtorem的配置项主要是设置rootValue，也就是根元素字体大小，一般这个值是根据设计稿来设置的，rootValue = 设计稿宽度/10，设计稿一般是375px或750px宽度来设计的

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 这是用来自动添加兼容各浏览器的css前缀的，比如--webkit-xxx等
          autoprefixer(),
          // 这是px转换成rem的插件，参数是一些配置，主要是设置rootValue
          pxtorem({
            rootValue: 37.5, // 根元素的font-size，这里是针对375的设计稿
            unitPrecision: 5, // 转换成rem后保留的小精准度
            propList: ['*'], // 作用于哪些属性
            selectorBlackList: ['vant-'], // 将哪些html元素排除在外，这里添加的是vant
            replace: true,
            mediaQuery: true,
            minPixelValue: 0,
            exclude: /node_modules/
          })
        ]
      }
    }
  }
}

5. 写个测试demo

5. 在浏览器打开
   发现已经随着不同的设备，html和body以及设置的容器大小、字体已经随之变化，都已经转换成对应的rem单位，说明设置没问题
   
   image.png
   
   
   image.png

可能存在的坑：

PostCSS plugin postcss-pxtorem requires PostCSS 8
原因：安装的postcss-pxtorem版本太高了，脚手架的postcss版本过低，不匹配

"postcss-pxtorem": "^6.0.0",

解决：将postcss-pxtorem降级，npm i [email protected]

后面有时间的话，会回来补充说明这两插件的实现原理，这里先留个坑...

参考：
https://blog.csdn.net/m0_47965154/article/details/115380574