移动端插件适配

一、移动端自适应需求
1、痛点：

首先、不论转换是否方便，我就是不想在开发代码的时候换算这些单位，更不想去操心什么转换系数（根节点单位）
我会考虑某些属性或者类选择器不需要转换为REM、VW等，如果统一转换，这会不符合我的项目需求。
css代码要足够简洁，我只希望看到一种单位，那就是px。我不想在我的代码中一些地方使用px，另一些地方又使用em、rem、vw等这些视口单位，我就想一把梭全部使用px单位。
2、解决方案一：Vue在H5端适配方案（amfe-flexible 和 postcss-pxtorem）
　　lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。
amfe-flexible库可以自动计算html根节点的字体大小
postcss-pxtorem插件，可以将px单位转换成rem单位
　　上面两个插件的搭配使用，将页面上的元素某些属性以相对于根元素的倍数来进行展示，从而适配不同的屏幕大小。

复制代码
// 1、下载插件
npm i amfe-flexible -S
npm i postcss-pxtorem -D

// 2、使用方法：在main.js中引入 amfe-flexible
import ‘amfe-flexible’

// 3、使用方法：新建postcss.config.js文件，添加如下代码：
module.exports = {
plugins: {
‘postcss-pxtorem’: {
rootValue: 75,
// 如果是二倍图750px,则rootValue写 75，如果是一倍图375px,则写 37.5
propList: [‘*’],
}
}
}
复制代码
　　有以下两个不足：

（1）两个插件需要配套使用，而且rootValue设置的值不好理解

（2）rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适

（3）lib-flexible 库github地址，官方已停止维护，并放弃使用了。

3、解决方案二是viewport：postcss-px-to-viewport 就是这样一款优秀、高效、简洁的解决方案

postcss-px-to-viewport就是这样一款优秀的插件，它能完美解决上面的三个痛点，高效的将代码中px单位转为vw视口单位，一份配置文件完美解决适配问题。它将px转换成视口单位vw，众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth

复制代码
// 1、开发环境 npm 安装插件
npm install postcss-px-to-viewport --save-dev

// 2、项目根目录添加配置文件

node_modules
public
src
postcss.config.js

// 3、添加配置
module.exports = {
plugins: {
‘postcss-px-to-viewport’: {
unitToConvert: ‘px’, // 需要转换的单位，默认为"px"
viewportWidth: 1920, // 设计稿的视口宽度
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 // 横屏时使用的视口宽度
}
}
}
复制代码
　　重新运行项目，触发配置文件生效。

二、postcss-px-to-viewport 在 Vite 中如何配置
1、安装完 postcss-px-to-viewport 插件后，按照之前vue-cli项目的方式，src目录下新建 postcss.config.js 文件并进行规则配置。运行起来并未报错，但是发现px并没有转换为vw单位。

2、问题解决：因为vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js 文件，我们只需要在 vite.config.js 中进行配置即可。具体配置如下：

复制代码
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import postcsspxtoviewport from ‘postcss-px-to-viewport’
export default defineConfig({
plugins: [
vue()
],
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: ‘px’, // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度，即小数点位数
propList: [‘*’], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: ‘vw’, // 指定字体需要转换成的视窗单位，默认vw
selectorBlackList: [‘ignore-’], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
landscape: false // 是否处理横屏情况
})
]
}
}
})
复制代码
3、需要注意的配置

（1）propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: [“*”,“!letter-spacing”]，这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的

（2）selectorBlackList：转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: [‘wrap’]，它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换

三、解决 Vant 375 设计尺寸问题
　　可以看这篇文章：https://blog.csdn.net/weixin_42998707/article/details/124150578

使用解决方案二，加上这个配置即可：只针对 vant 才转换

include: [/node_modules/vant/], // 针对vant的转换

原文链接可看 https://www.cnblogs.com/goloving/p/15238345.html