zoukankan      html  css  js  c++  java
  • 适配手机端之 rem

    (function() {
            var psdWidth = 1080,
                maxRem = 100,
                ch = document.documentElement.clientHeight || document.body.clientHeight,
                cw = document.documentElement.clientWidth || document.body.clientWidth,
                pageWidth;
    
            var calcRem = function() {
                if (window.orientation && (window.orientation == 90 || window.orientation == -90)) {
                    pageWidth = Math.max(ch, cw);
                } else {
                    pageWidth = Math.min(ch, cw);
                }
    
                var rem = (pageWidth / psdWidth * 100).toFixed(2);
                rem = Math.min(rem, maxRem);
                window.rem = rem;
                document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
            };
    
            calcRem();
    
            window["onorientationchange" in window ? "onorientationchange" : "onresize"] = calcRem;
        })();

      

      Eg. PSD中的width为378px,那么在手机端代码中为378/100=3.78rem.

  • 相关阅读:
    mysql perl 抓取update语句
    $/ 改变换行符
    $/ 改变换行符
    java读取jpg图片旋转按比例缩放
    感应器
    lisp分支
    鸡肋的Drools
    postgre去重复记录
    拖拽到指定位置
    base64coder调用
  • 原文地址:https://www.cnblogs.com/lulin1/p/7827240.html
Copyright © 2011-2022 走看看