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标记

1591001211884.png

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

将屏幕最大宽度改为设备宽度*dpr

1591003620339.png

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