在vue中使用postcss-px2rem

 

安装flexible和postcss-px2rem

npm i lib-flexible postcss-px2rem --save

flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比

 

一、在main.js中导入

import 'lib-flexible'

二、在vue.config.js中

module.exports = {
  // 设置rem自适应布局
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 79 // 设计稿宽度的1/10
          })
        ]
      }
    }
  }
}

 

三、适配ipad以及ipad prod，在public下的index.html的body标签中添加

<script>
  // 用于适配ipad以及ipad pro
  ;/(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent) &&
    ((head = document.getElementsByTagName('head')),
    (viewport = document.createElement('meta')),
    (viewport.name = 'viewport'),
    (viewport.content =
      'target-densitydpi=device-dpi, width=480px, user-scalable=no'),
    head.length > 0 && head[head.length - 1].appendChild(viewport))
</script>