nuxt 同时适配pc端和移动端实现(一套代码)

需求：在原有的pc端项目源码基础上迭代开发移动端适配

框架：nuxt,vuetify

一、实现思路

1. 引入 flexible

// 在config文件中

head:{
	 script:[
		{
            src:"/js/flexible.js", type: 'text/javascript', charset: 'utf-8'//移动端适配
        }
	]
}

flexible.js兼容文件

(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 = 540 * 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'] = {}))

提一嘴：添加引入flexible文件后，页面根元素的fontsize发生变化，但是由于该项目采用的vuetify ui框架底层样式部分以rem为单位，这就直接导致部分组件样式炸裂（据说element不会出现这种情况），字体变得非常大，如图：

 我的弹窗提示组件，分页器，标题都炸了。为了尽快交差，我临时想到的解决方案就是改sass表了，打开控制台，看看样式表哪个是按rem为单位，然后按悬浮窗口原有的值，去设置pc端（大屏）的以px为单位的值

2. 编写 scss， 加上函数r()
 

$baseWidthRate: 37.5; //如设计稿是750px的话，就是75

// px转换为rem

@function r($num) {  

  @return calc($num / $baseWidthRate) + rem;

}

（1）关于sass全局变量和自定义方法的应用点击查看详情

3. 页面中使用

<style lang="scss">
    @media only screen and (max-width: 1023px) {
      /* 使用了媒体查询 @media max-width: 1023px 属于小屏 */

      /* 小屏是使用了 rem 作为单位, 根据 html 标签 font-size 计算元素的大小 */
      /* 借助 sass 的函数功能 */
      .class类名 {
        font-size: r(12);
      }  
    }

    @media only screen and (min-width: 1024px) {
      /* 使用了媒体查询 @media 1024px 属于大屏 单位为px*/
      .class类名 {
        font-size: 12px;
      }  
    }
</style>