基于nuxt 2.0.0

一、安装postcss-px-to-viewport

npm安装

npm install postcss-px-to-viewport --save-dev

或 yarn安装

yarn add -D postcss-px-to-viewport

二、在nuxt中配置postcss-px-to-viewport

在nuxt.config.js中配置

export default {
...
...
... /*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
postcss: {
// 添加插件名称作为键,参数作为值
plugins: {
"postcss-px-to-viewport": {
unitToConvert: "px", // 默认值`px`,需要转换的单位
viewportWidth: , // 视窗的宽度,对应设计稿宽度
viewportHeight: , // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置
unitPrecision: , // 指定`px`转换为视窗单位值的小数位数
propList: ["*"], // 转化为vw的属性列表
viewportUnit: "vw", // 指定需要转换成视窗单位
fontViewportUnit: "vw", // 字体使用的视窗单位
selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
mediaQuery: false, // 允许在媒体查询中转换`px`
minPixelValue: , // 小于或等于`1px`时不转换为视窗单位
replace: true, // 是否直接更换属性值而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: "vw", // 横屏时使用的单位
landscapeWidth: // 横屏时使用的视窗宽度
}
},
preset: {
// 更改postcss-preset-env 设置
autoprefixer: {}
}
}
}
}

这样基本的配置就可以了。

其他适配问题可以参考下面的文章

参考:

nuxt中如何添加postcss插件:https://zh.nuxtjs.org/faq/postcss-plugins/#%E5%A6%82%E4%BD%95%E6%B7%BB%E5%8A%A0-postcss-%E6%8F%92%E4%BB%B6-

postcss-px-to-viewport: https://github.com/evrone/postcss-px-to-viewport

再聊移动端页面的适配(收费):https://www.w3cplus.com/css/vw-for-layout.html

再聊移动端页面的适配(转载):https://blog.csdn.net/qq_21729177/article/details/79466951

End--------------

全面复工啦~

05-11 18:30