rem.js 移动端rem适配js代码

最新推荐文章于 2024-05-17 13:52:13 发布

Arche_lqq

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量236

点赞数

文章标签： javascript 前端开发语言 css3 css

本文链接：https://blog.csdn.net/qq_35994750/article/details/128905297

版权

rem.js 移动端rem适配js代码

js

!(function(win, doc) {
    function setFontSize() {
        // 获取window 宽度
        var winWidth = window.innerWidth;
            //这里是假设在750px宽度设计稿的情况下
            //可以根据实际需要修改
        doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
    }
    // onorientationchange 屏幕旋转事件
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    var timer = null;
    win.addEventListener(evt, function() {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
    //初始化
    setFontSize();
}(window, document));

谷歌字体最小12px的解决方案

 1. transform: scale
  定义10px字体 :
 .font10 {
      display: inline-block; // 或者block
      font-size: 12px;
      -webkit-transform-origin-x: 0;
      transform: scale(0.84);
    }