vue写移动端适配rem

现在几点，开心一点

已于 2022-10-21 11:22:42 修改

阅读量294

点赞数

分类专栏： vue 文章标签：前端 vue.js web app

于 2022-06-29 17:06:53 首次发布

原文链接：https://www.csdn.net/tags/MtTaMgzsNzkyNTY2LWJsb2cO0O0O.html

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果图

① 写一个resize.js文件，放在public文件夹下--static文件夹下

// 动态修改html font-size 大小
// 通过js操控根元素的字体大小,从而做到屏幕适配
!(function(doc, win) {
  var docHtml = doc.documentElement;
  // 判断窗口有没有orientationchange这个方法，有就赋值给一个变量。没有就返回resize方法
  (resizeEvt = "orientationchange" in window ? "orientationchange" : "resize"),
    (resizes = function() {
      //  获取当前屏幕大小
      var cw = docHtml.clientWidth;
      //  如果没有获取到当前屏幕的大小
      if (!cw) return;
      if (cw > 750) {
        docHtml.style.fontSize = "28px";
      } else {
        //  动态修改font-size   100 * (375 / 750) = 50 (iPhone6/7/8为例)
        docHtml.style.fontSize = 28 * (cw / 750) + "px"; //14px=1rem
      }
    });

  if (!doc.addEventListener) return;
  /***
   * addEventListenter事件方法接受三个参数
   * （1）事件名
   * （2）回调执行函数
   * （3）是否冒泡
   */
  win.addEventListener(resizeEvt, resizes, false);
  // 绑定浏览器缩放与加载事件
  doc.addEventListener("DOMContentLoaded", resizes, false);
})(document, window);

② 接着在public文件夹下的index.html文件中引入该文件

③ 最后一步：在App.vue中设置根元素大小

html {

font-size: 14px; //设置根元素

}

完事！