使用插件适配移动端布局

Posted 2020-12-19 qqfontofweb

项目中使用  postcss-px-to-viewport 来实现写px自动转化为vw,vh 实现移动端的适配

 

vh vw 是视口单位，代表当前设备宽度的所占的比例，有点类似于百分比

 

使用步骤如下

 

① 项目根目录下新建文件  postcss.config.js   (注意一定要项目更目录)

 

② 复制如下默认配置，主要是设置基准（viewportWidth）比例 （根据设计稿宽度来）

 

module.exports = {
  plugins: {
    ‘postcss-px-to-viewport‘: {
      unitToConvert: ‘px‘,
      viewportWidth: 750,
      unitPrecision: 5,
      propList: [‘*‘],
      viewportUnit: ‘vw‘,
      fontViewportUnit: ‘vw‘,
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: ‘vw‘,
      landscapeWidth: 568
    }
  }
}

③ 可以愉快的使用px单位来根据设计稿宽度来切图了