美文网首页
字体自适应 rem单位

字体自适应 rem单位

作者: 七號7777 | 来源:发表于2020-11-10 09:13 被阅读0次

    大屏字体自适应(rem)
    vue
    https://www.jianshu.com/p/fd5adf1c7c57

    function setRem() {
        var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
        var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
        var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
    }
    window.addEventListener("load", setRem);
    window.addEventListener("resize", setRem);
    

    js
    https://blog.csdn.net/qq_33635385/article/details/90205902?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-3-90205902.nonecase&utm_term=%E5%A4%A7%E5%B1%8F%E9%80%82%E9%85%8D%E7%9A%84%E5%AD%97%E4%BD%93

    (function(doc,win){
         let fn = () => {
             let docEl = doc.documentElement,
                 clientWidth = docEl.clientWidth;
             if (!clientWidth) return;
             docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
         }
         if (!doc.addEventListener) return;
         win.addEventListener('resize',fn);
         doc.addEventListener('DOMContentLoaded',fn);
     })(document,window);
    

    相关文章

      网友评论

          本文标题:字体自适应 rem单位

          本文链接:https://www.haomeiwen.com/subject/rsyxsktx.html