首页 > 其他 > 详细

rem 自适应大屏幕

时间:2021-07-13 15:02:59      阅读:26      评论:0      收藏:0      [点我收藏+]
(function () {
      function resize() {
        // 设计稿宽度
        const designWidth = 1920;
        // 屏幕宽度
        const windowWidth = window.innerWidth;
        // html根元素
        const html = document.documentElement;
        // 计算
        html.style.fontSize = (100 / designWidth * windowWidth) + ‘px‘;
      }
      resize();

      // 动态监听屏幕宽度
      // 判断移动端横竖屏事件onorientationchange,若不是,就执行动态监听屏幕宽度
      window.addEventListener(‘onorientationchange‘ in window ? ‘onorientationchange‘ : ‘resize‘, resize);

      // 当初始的 HTML 文档被完全加载和解析完成之后,
      // DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。
      // DOMContentLoaded,文档加载完毕,确保能执行
      window.addEventListener(‘DOMContentLoaded‘, resize)
    })(document, window)

rem 自适应大屏幕

原文:https://www.cnblogs.com/landuo629/p/15005810.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!