字体自适应 rem单位

2020-11-10  本文已影响0人  七號7777

大屏字体自适应(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);
上一篇下一篇

猜你喜欢

热点阅读