使用vw进行移动端适配(nuxt项目)
基于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: 375, // 视窗的宽度,对应设计稿宽度 viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定,一般是667,也可不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数 propList: ["*"], // 转化为vw的属性列表 viewportUnit: "vw", // 指定需要转换成视窗单位 fontViewportUnit: "vw", // 字体使用的视窗单位 selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类 mediaQuery: false, // 允许在媒体查询中转换`px` minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位 replace: true, // 是否直接更换属性值而不添加备用属性 exclude: [], // 忽略某些文件夹下的文件或特定文件 landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: "vw", // 横屏时使用的单位 landscapeWidth: 1134 // 横屏时使用的视窗宽度 } }, preset: { // 更改postcss-preset-env 设置 autoprefixer: {} } } } }
这样基本的配置就可以了。
其他适配问题可以参考下面的文章