首页 > 移动平台 > 详细

适配手机端之 rem

时间:2017-11-13 17:49:22      阅读:307      评论:0      收藏:0      [点我收藏+]
(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.

 

适配手机端之 rem

原文:http://www.cnblogs.com/lulin1/p/7827240.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!