宽高比例保持一定的情况的REM适配方案

秒啊, 不用改代码了

  • 我这个是1080 * 1920的设计图, 针对了 375 / 667的屏幕
  • 再三强调, 这是取巧, 针对了高宽一定的页面
    // 分辨率适配
    (function() {
        var winWidth = document.documentElement.clientWidth || window.screen.width || window.outerWidth || document.documentElement.scrollWidth;
        var winHeight = document.documentElement.clientHeight || window.screen.height || window.outerHeight || document.documentElement.scrollHeight;
        var ratio = 1080 / 1920
        if ((winWidth / winHeight) < ratio) {
          var fontSizeRoot = winWidth / 375 * (100 / (1080 / 375)) + 'px';
        } else {
          var fontSizeRoot = winHeight / 667 * (100 / (1920 / 667)) + 'px';
        }
        document.documentElement.style.fontSize = fontSizeRoot;
    })();
posted @ 2020-04-14 16:35  张润昊  阅读(303)  评论(0编辑  收藏  举报