vue和react分别使用rem适配方法3.1

妖狐艹你老母 2023-10-01 20:51 6阅读 0赞

1.react

1.rem适配文件，在untils文件夹下新建rem.js,复制粘贴以下代码

2.index.js文件内引入import "./utils/rem.js";

3.vscode下个插件（px To rem）用于px转rem，快捷键是alt+z；我的设计图是1920，如果你不一样，可以去rem.js里面修改下就行。

4.页面出现以下内容证明文件生效：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16][]

(function (win, lib) {
      var doc = win.document
    
      var docEl = doc.documentElement
    
      var metaEl = doc.querySelector('meta[name="viewport"]')
    
      var flexibleEl = doc.querySelector('meta[name="flexible"]')
    
      var dpr = 0
    
      var scale = 0
    
      var tid
    
      var flexible = lib.flexible || (lib.flexible = {})
    
      if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例')
    
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
    
        if (match) {
          scale = parseFloat(match[1])
    
          dpr = parseInt(1 / scale)
        }
      } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content')
    
        if (content) {
          var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
    
          var 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) {
        var isAndroid = win.navigator.appVersion.match(/android/gi)
    
        var isIPhone = win.navigator.appVersion.match(/iphone/gi)
    
        var 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 {
          var wrap = doc.createElement('div')
    
          wrap.appendChild(metaEl)
    
          doc.write(wrap.innerHTML)
        }
      }
    
      function refreshRem () {
        var width = docEl.getBoundingClientRect().width
    
        if (width / dpr > 540) {
          width = width * dpr
        }
    
        var rem = width / 10
    
        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 (e) {
            doc.body.style.fontSize = 12 * dpr + 'px'
          },
    
          false
    
        )
      }
    
      refreshRem()
    
      flexible.dpr = win.dpr = dpr
    
      flexible.refreshRem = refreshRem
    
      flexible.rem2px = function (d) {
        var val = parseFloat(d) * this.rem
    
        if (typeof d === 'string' && d.match(/rem$/)) {
          val += 'px'
        }
    
        return val
      }
    
      flexible.px2rem = function (d) {
        var val = parseFloat(d) / this.rem
    
        if (typeof d === 'string' && d.match(/px$/)) {
          val += 'rem'
        }
    
        return val
      }
    })(window, window.lib || (window.lib = {}))

2.vue

1.rem适配文件，在untils文件夹下新建rem.js,复制粘贴上面代码

2.main.js文件内引入import taobaorem from '@/utils/taobaorem'

3.main.js文件内Vue.use(taobaorem)

3.vscode下个插件（px To rem）用于px转rem，快捷键是alt+z；我的设计图是1920，如果你不一样，可以去rem.js里面修改下就行。

4.页面出现以下内容证明文件生效：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/0c0d47bde2074c33a7aba4d0164f9a34.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_18,color_FFFFFF,t_70,g_se,x_16