用rem做各个浏览器的宽高兼容。

咿口薄荷糖

于 2022-01-10 15:20:21 发布

阅读量407

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_43936040/article/details/122411363

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过创建rem.js文件实现不同浏览器及屏幕尺寸的兼容性。在项目公共目录下创建rem.js，并在index.html中引入，确保vue.config.js的publicPath配置正确。1px等于0.1rem，字体大小可以设置为0.14rem以适应屏幕变化，确保在各种环境下良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个rem.js文件

(function (doc, win) {
  var docEl = document.documentElement || document.body;
  //设备重置
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  relalc = function () {
    //获取屏幕宽度
    // var clientwidth = window.screen.width                 //docEl.clientWidth
		var clientwidth = docEl.clientWidth
    if (!clientwidth) return
    if ("ActiveXObject" in window)  {
      docEl.style.fontSize = '100px'
    } else {
      docEl.style.fontSize = clientwidth / 19.2 + 'px'
    }
  }
  if (!addEventListener) return
  win.addEventListener(resizeEvt, relalc, false)
  doc.addEventListener('DOMContentLoaded', relalc, false)
})(document, window);