zoukankan      html  css  js  c++  java
  • 淘宝flexible.js+rem适配pc端

    1、引入flexible.js文件:

    (function flexible(window, document) {
      var docEl = document.documentElement;
      var dpr = window.devicePixelRatio || 1;
    
      // adjust body font size
      function setBodyFontSize() {
        if (document.body) {
          document.body.style.fontSize = 12 * dpr + "px";
        } else {
          document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
      }
      setBodyFontSize();
    
      // set 1rem = viewWidth / 10
      function setRemUnit() {
        var rem = docEl.clientWidth / 24;  // 这里默认是10等份,手动改为24,此时1rem=1920/24px即80px。(设计稿是1920px的)
        docEl.style.fontSize = rem + "px";
      }
    
      setRemUnit();
    
      // reset rem unit on page resize
      window.addEventListener("resize", setRemUnit);
      window.addEventListener("pageshow", function (e) {
        if (e.persisted) {
          setRemUnit();
        }
      });
    
      // detect 0.5px supports
      if (dpr >= 2) {
        var fakeBody = document.createElement("body");
        var testElement = document.createElement("div");
        testElement.style.border = ".5px solid transparent";
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
          docEl.classList.add("hairlines");
        }
        docEl.removeChild(fakeBody);
      }
    })(window, document);

     

     2、cssrem的Root Font Size改为80,修改完重启vscode

     

  • 相关阅读:
    dotweb框架之旅 [三]
    dotweb框架之旅 [二]
    dotweb框架之旅 [一]
    对 dotweb 框架进行统一的自定义错误处理
    go服务端----使用dotweb框架搭建简易服务
    Nginx日志文件切割
    linux安装PHP-memcache-redis扩展
    图与最短路径
    素数(质数)的一个用法
    一个手机号码剔重的问题
  • 原文地址:https://www.cnblogs.com/wuqilang/p/13491766.html
Copyright © 2011-2022 走看看