关于rem适配，

最新推荐文章于 2024-04-13 21:21:47 发布

xiaoLP1

最新推荐文章于 2024-04-13 21:21:47 发布

阅读量263

点赞数

分类专栏： web前端 rem 适配

本文链接：https://blog.csdn.net/xiaoLP1/article/details/81941560

版权

web前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

rem

1 篇文章 0 订阅

订阅专栏

适配

1 篇文章 0 订阅

订阅专栏

1.创建rem.js文件，写入代码

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = (clientWidth>=750 ? 100 : clientWidth/7.5) + 'px';//750为设计图宽度，大于750时不会适配
    };
  
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

2.main.js全局引入

import ‘路径’

3.单位px/100改为rem 如(100px==1rem)