分辨率自适应

为了实现项目在不同分辨率上看着一致，使用postcss将整个项目的px转化为rem。基于1920设计稿实现网页不同分辨率的适配

1. 下载postcss

   pnpm add postcss-pxtorem -d
   pnpm add postcss -d

2. 根目录下创建 postcss.config.js 文件

    module.exports = {
          plugins: {
            'postcss-pxtorem': {
              rootValue: 100, // 基准值：100px = 1rem
              unitPrecision: 5, // rem 值保留的小数位数
              propList: ['*'], // 需要转换的属性列表，'*' 表示所有属性
              selectorBlackList: [], // 要忽略的选择器，可以使用正则
              replace: true, // 是否替换而不是添加
              mediaQuery: false, // 是否在媒体查询中转换 px
              minPixelValue: 0 // 设置要替换的最小像素值，0 表示所有值都转换
            }
          }
        }

3. 在main文件中引入

 import '@/utils/flexible'

4. flexible文件

    (function(win, lib) {
          const doc = win.document
          const docEl = doc.documentElement
          let metaEl = doc.querySelector('meta[name="viewport"]')
          const flexibleEl = doc.querySelector('meta[name="flexible"]')
          let dpr = 0
          let scale = 0
          let tid
          const flexible = lib.flexible || (lib.flexible = {})

          if (metaEl) {
            console.warn('将根据已有的meta标签来设置缩放比例')
            const match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)

            if (match) {
              scale = parseFloat(match[1])
              dpr = parseInt(1 / scale)
            }
          } else if (flexibleEl) {
            const content = flexibleEl.getAttribute('content')

            if (content) {
              const initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
              const maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)

              if (initialDpr) {
                dpr = parseFloat(initialDpr[1])
                scale = parseFloat((1 / dpr).toFixed(2))
              }

              if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1])
                scale = parseFloat((1 / dpr).toFixed(2))
              }
            }
          }

          if (!dpr && !scale) {
            // const isAndroid = win.navigator.appVersion.match(/android/gi)
            const isIPhone = win.navigator.appVersion.match(/iphone/gi)
            const devicePixelRatio = win.devicePixelRatio

            if (isIPhone) {
              // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
              if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3
              } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2
              } else {
                dpr = 1
              }
            } else {
              // 其他设备下，仍旧使用1倍的方案
              dpr = 1
            }
            scale = 1 / dpr
          }

          docEl.setAttribute('data-dpr', dpr)
          if (!metaEl) {
            metaEl = doc.createElement('meta')
            metaEl.setAttribute('name', 'viewport')
            metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
            if (docEl.firstElementChild) {
              docEl.firstElementChild.appendChild(metaEl)
            } else {
              const wrap = doc.createElement('div')

              wrap.appendChild(metaEl)
              doc.write(wrap.innerHTML)
            }
          }

          function refreshRem() {
            const width = docEl.getBoundingClientRect().width
            let clientWidth = width / dpr

            // 屏幕宽度大于1920，不再放大
            if (clientWidth > 1920) {
              clientWidth = 1920
            }
            // 基准值：100px = 1rem，基于1920px设计稿
            const rem = clientWidth / 1920 * 100

            docEl.style.fontSize = rem + 'px'
            flexible.rem = win.rem = rem
          }

          win.addEventListener('resize', function() {
            clearTimeout(tid)
            tid = setTimeout(refreshRem, 300)
          }, false)
          win.addEventListener('pageshow', function(e) {
            if (e.persisted) {
              clearTimeout(tid)
              tid = setTimeout(refreshRem, 300)
            }
          }, false)

          if (doc.readyState === 'complete') {
            doc.body.style.fontSize = 12 * dpr + 'px'
          } else {
            doc.addEventListener('DOMContentLoaded', function() {
              doc.body.style.fontSize = 12 * dpr + 'px'
            }, false)
          }

          refreshRem()

          flexible.dpr = win.dpr = dpr
          flexible.refreshRem = refreshRem
          flexible.rem2px = function(d) {
            let val = parseFloat(d) * this.rem

            if (typeof d === 'string' && d.match(/rem$/)) {
              val += 'px'
            }

            return val
          }

          flexible.px2rem = function(d) {
            let val = parseFloat(d) / this.rem

            if (typeof d === 'string' && d.match(/px$/)) {
              val += 'rem'
            }

            return val
          }
        })(window, window.lib || (window.lib = {}))

5. 重启项目

注意： 该插件只支持class类里面的转化，不支持style 行内样式，因此需要检查一下最好使用class的创建样式

动态的像素计算方法（可直接使用） 1920为设计稿的宽度

    const screenWidth = window.innerWidth || document.documentElement.clientWidth || 1920
    const designWidth = 1920
    const height = Math.round(37 * (screenWidth / designWidth))