zoukankan      html  css  js  c++  java
  • web使用rem自适应

     1 (function(doc, win) {
     2     var docEl = doc.documentElement,
     3         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
     4         recalc = function() {
     5             var clientWidth = docEl.clientWidth;
     6             if (!clientWidth) return;
     7             // if (clientWidth >= 750) {
     8             //     docEl.style.fontSize = '100px';
     9             // } else {
    10             docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    11             // }
    12         };
    13 
    14     if (!doc.addEventListener) return;
    15     win.addEventListener(resizeEvt, recalc, false);
    16     doc.addEventListener('DOMContentLoaded', recalc, false);
    17 })(document, window);

    # 375为设计稿宽度

    此刻根元素的font-size已经会跟随屏幕分辨率的变化而变化

    配合vscode的px2rem插件可以更方便

  • 相关阅读:
    concurrent-锁
    字符串查找字符串
    指针作为函数返回值
    数组名作为函数参数
    指针和函数
    多级指针
    指针数组
    指针运算
    指针和数组
    const修饰的指针类型
  • 原文地址:https://www.cnblogs.com/223zzm/p/11305123.html
Copyright © 2011-2022 走看看