vue/cli3 里 使用px2rem 以及自己对屏幕自适应插件的理解

vue 项目中如何使用插件达到屏幕自适应的目的

插件名称：px2rem

一、安装：npm install postcss-px2rem

二、在vue.config.js中配置（如果没有vue.config.js文件可以在根目录下创建一个）

const px2rem = require('postcss-px2rem')

const postcss = px2rem({
  remUnit: 100   //基准大小 baseSize,建议写100 因为可以根据1rem=100px 快速算出设计图的尺寸
})

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

三、在index.html 文件中加入下面这段代码

<script>
          // 基准大小   1rem为100px 
        const baseSize = 100
        // 设置 rem 函数
        function setRem() {
          // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
          const scale = document.documentElement.clientWidth / 750
          // 设置页面根节点字体大小
          document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
        }
        // 初始化
        setRem()
        // 改变窗口大小时重新设置 rem
        window.onresize = function() {
          setRem()
        }
  
  </script>

px2rem的原理 是根据当前屏幕的宽度动态设置html的字体大小，以375的屏幕举例 此时 scale的值 就为375/750 也就是0.5 那么当前html的字体大小就是**100 * (375 / 750)**也就是说 1rem = 50px 那么 7.5rem = 375px 首先知道一个公式

x/ui = y/pcw 什么意思呢

x 代表的是设计图上某一个元素的设计宽度
ui 代表设计图的总宽度
y 代表我们css中你要写的x这个元素的一个宽度
pcw 代表屏幕的实际宽度

也就是说不管怎么放大或是缩小 他们对应的比例应该是一样的，以375的实际屏幕和750的设计图举例（iphone6/7/8均为375）那么已知pcw=375 ui=750， 我们假设设计图中某一元素宽度为50，那么x=50 ，y=x * (pcw / ui)
此时 y=50 * (375 / 750) = 25px 此时根元素的font-size=50px(100 * (375 / 750)) 那此元素的rem值就是
[50 * (375 / 750) ] / [100 * (375 / 100) ] 约分后发现 就是50 / 100，也就是0.5rem 这也就是为什么将 baseSize 设置为100 的原因 方便计算

总结： baseSize设置为100 写代码的时候直接根据设计图的大小/100 即可得知当前元素的 rem 值