移动端适配

1、如果你只是简单的只适配移动端，不需要适配pc端的话

首先在head标签里加上meta

<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

而后再将写好的脚本引入即可（将下面代码写在一个文件中，在head中引用）

<script src="/plugin/lib-flexible.min.js"></script>

!(function(e, t) {
  function n() {
    t.body ? (t.body.style.fontSize = 12 * o + 'px') : t.addEventListener('DOMContentLoaded', n)
  }
  function d() {
    var e = i.clientWidth / 10
    i.style.fontSize = e + 'px'
  }
  var i = t.documentElement,
    o = e.devicePixelRatio || 1
  if (
    (n(),
    d(),
    e.addEventListener('resize', d),
    e.addEventListener('pageshow', function(e) {
      e.persisted && d()
    }),
    o >= 2)
  ) {
    var a = t.createElement('body'),
      s = t.createElement('div')
    ;(s.style.border = '.5px solid transparent'),
      a.appendChild(s),
      i.appendChild(a),
      1 === s.offsetHeight && i.classList.add('hairlines'),
      i.removeChild(a)
  }
})(window, document)

2、如果是需要兼容pc端和移动端，那么meta不变，脚本代码改为以下

!(function(e, t) {
  function n() {
    t.body ? (t.body.style.fontSize = 12 * o + 'px') : t.addEventListener('DOMContentLoaded', n)
  }
  // 判断是否是移动端
  function isMobilePlatform() {
    const userAgent = window.navigator.userAgent.toLowerCase()
    if (/(iphone|ipad|ipod|ios|android)/gi.test(userAgent)) {
      return true
    } else {
      return false
    }
  }
  function d() {
    let isMobile = isMobilePlatform()
    if (isMobile) {
      var e = i.clientWidth / 10
      i.style.fontSize = e + 'px'
    } else {
      if (t.body) {
      // pc端的最大宽度的设置
        t.body.style.maxWidth = 768 + 'px'
        t.body.style.margin = '0 auto'
      } else {
        t.addEventListener('DOMContentLoaded', d)
      }
		// pc端的最大宽度为多少，则他的fontSize为它的十分之一，量尺寸的时候使用蓝湖将尺寸调为pc端的最大尺寸
      i.style.fontSize = 76.8 + 'px'
    }
  }
  var i = t.documentElement,
    o = e.devicePixelRatio || 1
  if (
    (n(),
    d(),
    e.addEventListener('resize', d),
    e.addEventListener('pageshow', function(e) {
      e.persisted && d()
    }),
    o >= 2)
  ) {
    var a = t.createElement('body'),
      s = t.createElement('div')
    ;(s.style.border = '.5px solid transparent'),
      a.appendChild(s),
      i.appendChild(a),
      1 === s.offsetHeight && i.classList.add('hairlines'),
      i.removeChild(a)
  }
})(window, document)

如果想要在移动端写px的话，react可以下载 postcss-pxtorem，vue使用px2rem插件。

如果对大家有帮助的话希望大家可以点个赞！分享多多，干货满满。