这篇文件是以应用的角度介绍如何使用vue（使用vue-cli创建项目）来设置响应式布局，让我们能更便捷使用px去开发还原设计图，不必考虑过多的单位转换计算、适配等问题
设置viewport
设置布局窗口和视觉窗口一致，缩放比例都设为1，并且不允许缩放
width=device-width: 表示让 布局视口 的宽度等于设备宽度initial-scale=1.0: 表示页面的初始缩放比例为1，让 视觉视口 等于 理想视口maximum-scale=1.0,minimum-scale=1.0：表示页面的最大/最小缩放比为1user-scalable=no表示不允许用户对页面进行缩放操作
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
移动端布局
这里采用的方案是将px转换成rem，在实战中，我们要学会使用工具来帮助快速开发，这里主要用两个插件amfe-flexible和postcss-pxtorem
- amfe-flexible：配置可伸缩布局方案，主要是将
1rem设为viewWidth/10 - postcss-pxtorem：
postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。
- 在设置布局前，需要引入 reset.css 文件，用来消除不同设备的浏览器之间的差异
// main.js
import './assets/resset.css'
安装
postcss-pxtorem和amfe-flexible
npm install postcss-pxtorem amfe-flexible -D在
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')
- 在
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/
})
]
}
}
}
}
- 写个测试demo
<template>
<div class="content">test h5 layout</div>
</template>
<style>
.content {
width: 375px;
background: #eee;
font-size: 16px;
}
</style>
- 在浏览器打开
发现已经随着不同的设备，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 postcss-pxtorem@5.1.1
后面有时间的话，会回来补充说明这两插件的实现原理，这里先留个坑...
参考：
https://blog.csdn.net/m0_47965154/article/details/115380574
