在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>