移动端适配：vw适配方案

vw (Viewport Width) 是一种长度单位，代表视口宽度的百分比。1vw 等于视口宽度的1%。在网页设计和前端开发中，vw 单位常用于实现响应式设计和屏幕适配，尤其是针对不同尺寸和分辨率的移动设备。

为什么使用vw适配？

1. 响应式: 使用vw可以确保元素的尺寸随浏览器窗口或设备屏幕的大小变化而按比例调整，实现良好的响应式布局。
2. 简化计算: 相比于传统的像素单位，vw让开发者能够更直观地根据视口比例来设定元素尺寸，无需考虑具体像素值。
3. 设计师与开发者对齐: 设计图上的百分比尺寸可以直接转换为vw单位，有助于设计与实现的一致性。

如何使用？

基于postcss插件，实现项目vw适配！

安装

npm install postcss-px-to-viewport --save-dev// 如果报错,就执行以下代码安装
// npm i postcss-px-to-viewport@1.1.1 -D --legacy-peer-depv

根目录下新建 postcss.config.js文件,填入配置

// postcss.config.js
module.exports = {plugins: [require('postcss-px-to-viewport')({viewportWidth: 375, // 视口宽度，对应设计稿的宽度，一般为设计稿宽度的1/10viewportHeight: 1334, // 视口高度，可选，一般不需要设置unitPrecision: 5, // 单位转换后的精度，即小数点后的位数viewportUnit: 'vw', // 转换后的单位selectorBlackList: ['.ignore', '.hairlines'], // 不进行转换的类名列表minPixelValue: 1, // 小于或等于这个值的px不转换为vwmediaQuery: false, // 是否在媒体查询的CSS代码中也进行转换，默认falsereplace: true, // 是否直接替换原始的px值，而不是添加备用的vw值exclude: /(node_modules|bower_components)/, // 忽略某些文件夹下的文件include: undefined, // 可以显式地包含某些文件或文件夹}),],
};

关于viewportWidth建议取设计稿的宽度，一般设计稿是750px，但是我们移动端屏幕一般宽度为375px(以iphone SE为基准)，也就是屏幕实际1px对应设计稿2px，这样才能分配好设计稿的像素。

更新Vue配置（仅限Vue CLI）

如果使用Vue CLI，可能需要在vue.config.js中添加对PostCSS的配置，确保PostCSS被正确加载。对于Vue CLI 3及以上版本，配置通常是自动检测的，但如果需要手动配置，可以这样操作：

// vue.config.js
module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-px-to-viewport')({// 插件的配置选项同上}),],},},},
};