vue中利用PostCSS实现移动端自适应

Front-end

2019-02-19

129

0

1.利用npm安装下面9个插件

2.将下列代码复制到.postcssrc.js

module.exports = {

   "plugins": {

     "postcss-import": {},

     "postcss-url": {},

     "postcss-aspect-ratio-mini": {},

     "postcss-write-svg": {

       utf8: false

     },

     "postcss-cssnext": {},

     "postcss-px-to-viewport": {

       viewportWidth: 750, //视窗的宽度(设计稿宽度)

       viewportHeight: 1334,

       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)

       viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw

       selectorBlackList: ['.ignore', '.hairlines'], //指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名

       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值

       mediaQuery: false // 允许在媒体查询中转换`px`

     },

     "postcss-viewport-units": {},

     "cssnano": {

       preset: "advanced",

       autoprefixer: false,

       "postcss-zindex": false

     }

   }

}

3.在写css的时候,直接写设计图上的px即可,会自动转成vw单位。

参考文档:https://juejin.im/entry/5a9d07b76fb9a028cb2d2032

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01