zoukankan      html  css  js  c++  java
  • 百度 前端 rem 适配 和 阿里 前端 rem 适配

    阿里 

    <script>
      var html = document.documentElement;
      window.rem = html.getBoundingClientRect().width / 37.5;
      html.style.fontSize = window.rem + 'px';
      </script>

    阿里2 

    <script>
      (function(doc, win) {
      var docEle = doc.documentElement,
      evt = "onorientationchange" in window ? "orientationchange" : "resize",
      fn = function() {
      var width = docEle.clientWidth;
      width && (docEle.style.fontSize = 10 * (width / 375) + "px")
      }
      win.addEventListener(evt, fn, false);
      doc.addEventListener("DOMContentLoaded", fn, false)
       
      }(document, window))
      </script>

    百度

     (function () {
    var newFontSize = window.getComputedStyle(document.documentElement)['font-size'];
    var fontSizeScale = 16 / parseFloat(newFontSize.replace('px','')) ;
    //获取屏幕大小
    var html = document.documentElement;
    document.addEventListener('DOMContentLoaded', function () {
    resetRem();
    resetScreen();
    });
    window.addEventListener('load', function () {
    setTimeout(resetRem, 300);
    resetScreen();
    });
    window.addEventListener('resize', function () {
    setTimeout(resetRem, 300);
    resetScreen();
    });
    function resetRem() {
    html.style.fontSize = html.clientWidth / 20 * fontSizeScale + 'px';
    console.log(html.clientWidth);
    console.log(html.style.fontSize);
    }
    function resetScreen() {
    window.scrollTo(0,0);
    // var height = html.clientHeight || window.innerHeight;
    // var width = html.clientWidth || window.innerWidth;
    // document.querySelector('body').style.height = height + 'px';
    // document.querySelector('body').style.width = width + 'px';
    // document.querySelector('body').style.margin = 0;
    // document.querySelector('body').style.padding = 0;
    }
    resetRem();
    })();
  • 相关阅读:
    C++进阶--析构函数中的异常
    C++进阶--派生类的析构(虚析构函数,shared_ptr)
    linux_shell_拆分文件_多进程脚本
    java_eclipse_设置全局编码_utf-8_编译class指定_运行jar乱码解决_不依赖环境
    linux_环境变量设置 utf-8
    linux_awk_内部正则过滤
    java_Eclipse中SVN的安装步骤(两种)和使用方法
    linux_vim_快捷键
    php_公共方法01_传入数组_打印可见信息
    linux_sed 正则替换
  • 原文地址:https://www.cnblogs.com/itliulei/p/9223386.html
Copyright © 2011-2022 走看看