用vue2框架搭建的H5项目,如何使页面自适应不同的屏幕呢?目前主流的是使用插件postcss-px-to-viewport来自动将px单位转换成vw。
一、首先,我们创建项目的时候,就要下载插件
yarn add postcss-px-to-viewport@1.1.1 -D
或者
npm i postcss-px-to-viewport@1.1.1 -D
二、然后直接在项目文件夹创建postcss.config.js文件
module.exports = {
plugins: {
autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要转化的单位
viewportWidth: 750, // UI设计稿的宽度
unitPrecision: 6, // 转换后的精度,即小数点位数
propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,
minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
landscape: false // 是否处理横屏情况
}
}
};
viewportWidth:设计稿的视口宽度
- vant-ui中的组件就是按照375的视口宽度设计的;
- 恰好项目中的设计稿也是按照375的视口宽度设计的,所以此时 我们只需要配置375就可以了;
- 如果设计稿不是按照375而是按照750的宽度设计,那此时这个值改怎么填呢?
只需要加上以下代码即可:
注意:
- 这里使用path.join(‘node_modules’, ‘vant’)是因为适应不同的操作系统;
- 在mac下结果为node_modules/vant,而在windows下结果为node_modules\vant
module.exports = ({ file }) => {
const designWidth = file.dirname.includes("'node_modules', 'vant'") ? 375 : 750;
return {
plugins: {
"postcss-px-to-viewport": {
viewportWidth: designWidth,
},
},
};
};
或者设置忽略/node_modules/文件
exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
注意:
- propList:
当有些属性的单位我们不希望转换的时候,可以添加在数组后面,并在前面加上!号,如propList: [“*”,“!letter-spacing”],这表示:所有css属性的属性的单位都进行转化,除了letter-spacing的 - selectorBlackList:
转换的黑名单,在黑名单里面的我们可以写入字符串,只要类名包含有这个字符串,就不会被匹配。比如selectorBlackList: [‘wrap’],它表示形如wrap,my-wrap,wrapper这样的类名的单位,都不会被转换