码迷,mamicode.com
首页 > 其他好文 > 详细

rem布局进入页面样式错乱解决

时间:2017-10-20 21:42:36      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:ret   play   doc   hang   add   window   dom   显示   color   

开发项目时候第一次遇到rem布局进入页面瞬间样式错乱问题:

//该段js为rem布局应用  如10px = 0.1rem;
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            if(clientWidth >= 750) {
                docEl.style.fontSize = ‘100px‘;
            } else {
                //alert(clientWidth);
                docEl.style.fontSize = 100 * (clientWidth / 750) + ‘px‘;
            }
        };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

解决方案(jq):先设置body如下图,然后再显示

<body style="display: none;"> 

$("body").css("display","block")

input框呼起键盘(必须禁用方法如下):

<input class="preDate" type="text" placeholder="请输入预产期" onfocus="this.blur();" />

 

rem布局进入页面样式错乱解决

标签:ret   play   doc   hang   add   window   dom   显示   color   

原文地址:http://www.cnblogs.com/lhl66/p/7701242.html

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