码迷,mamicode.com
首页 > 移动开发 > 详细

适配手机端之 rem

时间:2017-11-13 18:17:41      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:适配   style   class   element   idt   func   blog   span   win   

(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

标签:适配   style   class   element   idt   func   blog   span   win   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!