pc端網頁屏幕自適應適配方案（rem）

1 、安裝flexible和postcss-px2rem

npm i lib-flexible --save
npm i postcss-px2rem --save -dev

2、 在main.js 引入lib-flexible

import 'lib-flexible'

*3、刪除public/index.html 中的meta標記

4、修改lib-flexible/flexible.js(node_modules)

將屏幕最大寬度改為設備寬度*dpr

5、配置postcss-px2rem

• vue.config.js里的css預處理中的postcss插件里

  css: {
        loaderOptions: {
          postcss: {
            plugins: [
              //remUnit 通常我們是根據設計圖寬度十分之一來定這個值
              //假如設計圖給的寬度是750，我們通常就會把remUnit設置為75，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發。
              require('postcss-px2rem')({
                remUnit: 80
              })
            ]
          }
        },
      },
  

• package.json

• postcss.config.js(新建)

  module.exports = {
    plugins: [
      require('postcss-px2rem')({
        remUnit: 80
      })
     ]
  }
  

相關資料 dpr是設備像素和與css像素的比例 iPhone8設備像素為750px1354px 當dpr為2時，css像素為375px*677px 詳細可看https://blog.csdn.net/a419419/article/details/79295799