vue写h5自适应js代码

效果

vue自适应js

1.功能（在你的CSS或JavaScript代码中，可以使用基于rem单位来编写样式，这样就能根据设备自动适配布局与字体大小。）

1.根据设备屏幕宽度、设备像素比等信息动态设置根元素（通常为html）的字体大小，并以此为基础计算rem单位的实际尺寸。
2.创建或修改页面中的meta viewport标签以控制页面缩放比例。
3.注册窗口大小改变事件监听器以及pageshow事件监听器，当窗口尺寸发生变化或页面重新加载时，会自动调整字体大小和rem基准值。
4.提供了两个工具函数：D.rem2px(d)用于将rem单位转换为px单位，D.px2rem(d)用于将px单位转换为rem单位。

2.在vue中assets/js下创建flexible.js文件

! function (N, M) {
  /**
   * 根据当前元素宽度调整字体大小和rem单位基准值
   * 该函数没有参数和返回值
   */
  function L() {
    // 获取当前元素的宽度
    var a = I.getBoundingClientRect().width;
    // 如果宽度与屏幕宽度比例大于540，则将宽度设置为540屏幕宽度的倍数
    a / F > 540 && (a = 540 * F);
    // 根据调整后的宽度计算新的字体大小
    var d = a / 10;
    // 设置元素的字体大小，并更新全局rem基准值
    I.style.fontSize = d + "px", D.rem = N.rem = d
  }
  var K, J = N.document,
    I = J.documentElement,
    H = J.querySelector('meta[name="viewport"]'),
    G = J.querySelector('meta[name="flexible"]'),
    F = 0,
    E = 0,
    D = M.flexible || (M.flexible = {});

  // 通过meta标签内容计算缩放比例
  if (H) {
    console.warn("将根据已有的meta标签来设置缩放比例");
    var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
    C && (E = parseFloat(C[1]), F = parseInt(1 / E))
  } else if (G) {
    var B = G.getAttribute("content");
    if (B) {
      var A = B.match(/initial\-dpr=([\d\.]+)/),
        z = B.match(/maximum\-dpr=([\d\.]+)/);
      A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 /
        F).toFixed(2)))
    }
  }

  // 如果没有从meta标签获取到缩放比例，根据设备信息计算缩放比例
  if (!F && !E) {
    var y = N.navigator.userAgent,
      x = (!!y.match(/android/gi), !!y.match(/iphone/gi)),
      w = x && !!y.match(/OS 9_3/),
      v = N.devicePixelRatio;
    F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
  }

  // 设置data-dpr属性，并在没有viewport标签时创建并添加viewport标签
  if (I.setAttribute("data-dpr", F), !H) {
    if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" +
      E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
      I.firstElementChild.appendChild(H)
    } else {
      var u = J.createElement("div");
      u.appendChild(H), J.write(u.innerHTML)
    }
  }

  // 监听窗口大小改变和页面展示事件，以适应不同设备和刷新页面时调整字体大小和rem基准值
  N.addEventListener("resize", function () {
    clearTimeout(K), K = setTimeout(L, 300)
  }, !1), N.addEventListener("pageshow", function (b) {
    b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
  }, !1),
    // 初始化字体大小和rem基准值
    "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded",
      function () {
        J.body.style.fontSize = 12 * F + "px"
      }, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L,
    // 提供rem到px和px到rem的转换函数
    D.rem2px = function (d) {
      var c = parseFloat(d) * this.rem;
      return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
    }, D.px2rem = function (d) {
      var c = parseFloat(d) / this.rem;
      return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
    }
}(window, window.lib || (window.lib = {}));

3.在index.html中引入flexible.js(注意自己的路径)

<script src="/src/assets/js/flexible.js"></script>

4.使用

 <div style="text-align: center;font-size: 1.5rem;font-weight: bold;">
      播放音乐
    </div>

注意：字体大小设置如果是px是基于CSS直接设置的，并不会受到JavaScript中通过rem设置的字体大小的影响。如果你想要文本也受到rem设置的影响，你需要确保这部分文本的字体大小是通过rem来设置的