移动端适配配置项
方法1： postcss-px-viewport
1.安装 postcss-px-viewport 插件及其依赖：
npm install postcss-px-viewport postcss-viewport-units postcss-preset-env -D
其中，postcss-px-viewport 是主要的插件，postcss-viewport-units 和 postcss-preset-env 是其依赖，用于支持更多的 CSS 新特性和语法转换。
2.在项目根目录下创建 postcss.config.js 文件，配置 postcss-px-viewport 插件：
module.exports = {
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 需要转换的单位
viewportWidth: 375, // 视口宽度，等同于设计稿宽度
unitPrecision: 5, // 精确到小数点后几位
/**
* 将会被转换的css属性列表，
* 设置为 * 表示全部，如：['*']
* 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
* 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
* 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
* */
propList: ["*",],
viewportUnit: "vw", // 需要转换成为的单位
fontViewportUnit: "vw",// 需要转换称为的字体单位
/**
* 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
* 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
* 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
*/
selectorBlackList: ['sleepmode_item'],
minPixelValue: 1, // 最小的像素单位值
mediaQuery: false, // 是否转换媒体查询中设置的属性值
replace: true, // 替换包含vw的规则，而不是添加回退
/**
* 忽略一些文件，如'node_modules'
* 设置为正则表达式，将会忽略匹配该正则的所有文件
* 如果设置为数组，那么该数组内的元素都必须是正则表达式
*/
exclude: [],
landscape: false, // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
landscapeUnit: "vw", // 横屏单位
landscapeWidth: 1334, // 横屏宽度
},
},
};
'
运行运行
方法2：postcss-pxtorem
- npm安装
npm install postcss-pxtorem --save
2.utils文件夹下（没有就新建一个）,新建一个rem.js
代码如下：
function setRem() {
// 配置宽度为1920px时，1rem的值为：16px;
const screenWidth = 1280;
const scale = screenWidth / 16;
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0];
// 设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / scale + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};
3.配置
代码：
postcss: {
postcssOptions: {
plugins: [
tailwindcss,
[
'postcss-pxtorem',
{
rootValue: 16, // 换算比例，结果为：设计稿元素尺寸/16,比如在css文件中设置元素宽width:320px,最终页面会换算成 320 / 16 = 20rem;还需要在rem.js中根据屏幕的实际宽度计算rem的动态值，即可算出20rem的值
unitPrecision: 5, // 保留rem小数点多少位
propList: [''], // 需要做转化处理的属性，如hight、width、letter-spacing等，``表示全部
// propBlackList: ['font-size'], //过滤掉不需要转换的属性
minPixelValue: 12, // px小于12的不会被转换,默认 0
selectorBlackList: ['el-', /^.ant/], // 忽略转换rem转换,正则匹配项（选择器）,如：过滤点含有"el-"或以".ant"开头的选择器
exclude: /(\/|\)(MenuTool)(\/|\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
},
],
],
},
},
