开发项目时候第一次遇到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布局进入页面样式错乱解决的更多相关文章

  1. 架构师小跟班：SSL证书免费申请及部署，解决页面样式错乱问题完整攻略

    申请证书 1.登录阿里云控制台,产品与服务,选择SSL证书 2.进入SSL证书页面,点击“购买证书”,选择免费1年的证书类型,点击“立即购买” 3.返回SSL证书页面,可以看到证书列表里多了一条记录 ...

  2. lib-flexible 结合 WKWebView 的样式错乱解决方法

    技术栈 lib-flexible 是淘宝的可伸缩方案 WKWebView 是ios8以上支持的网页控件 问题场景 最新公司一个项目使用 lib-flexible 来做移动端的伸缩解决方案,页面在saf ...

  3. ASP.NET后台JS弹框使前台页面样式丢失 解决办法

    Response.Write("<script>alert('您还没有上传相关图片!');</script>");是向前台输出js 应该用下面的方法 Cli ...

  4. 81.node.js前端html时页面格式错乱解决办法

    var http = require("http"); var url = require("url"); var fs = require("fs& ...

  5. 手机端页面自适应解决方案—rem布局进阶版

    手机端页面自适应解决方案—rem布局进阶版   https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...

  6. 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  7. 手机端页面自适应：rem布局

    rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...

  8. 手机端页面自适应解决方案—rem布局（该方案目前已过时）

    转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...

  9. rem手机端页面自适应布局（待修正下一篇完美布局）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java设计模式—单例设计模式(Singleton Pattern)全然解析

    转载请注明出处:http://blog.csdn.net/dmk877/article/details/50311791 相信大家都知道设计模式,听的最多的也应该是单例设计模式,这种模式也是在开发中用 ...

  2. python爬虫【第2篇】【多进程】

    一.多进程 1.fork方法(os模块,适用于Lunix系统) fork方法:调用1次,返回2次.原因:操作系统经当前进程(父进程)复制出一份进程(子进程),两个进程几乎完全相同,fork方法分别在父 ...

  3. iOS平台加入Google Admob -1/2（Unity3D开发之七）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com.谢谢! 原文地址: http://www.cocos2dev.com/?p=567 Unity调用iOS还是非 ...

  4. [计算机故障处理]EXCEL文件双击不能直接打开

    同事的电脑里的EXCEL文件不知什么原因双击不能直接打开了,双击只能打开软件而且是没有任何表格的,但通过软件中的“打开”再找到指定的文件能打开. 解决方案: 打开excel,依次选择:工具-选项-常规 ...

  5. ZOJ 3872 计算对答案的贡献

                                                   D - Beauty of Array Description Edward has an array A ...

  6. SemaphoreSlim

    https://msdn.microsoft.com/en-us/library/system.threading.semaphoreslim(v=vs.110).aspx Represents a ...

  7. bzoj3786

    splay维护dfs序 我们发现有移动子树这种操作,树剖是做不了了,又要实现子树加,lct又维护不了了,这时我们用splay维护入栈出栈序来支持这些操作.我们记录每个点的入栈时间和出栈时间,这样一个闭 ...

  8. eclipse faild to creat the java Virtual Machine的解决办法

    打开eclipse的时候突然出现了 faild to creat the java Virtual Machine 解决办法:打开解压后的Eclipse文件夹,找到eclipse.ini配置文件 打开 ...

  9. bzoj 1664: [Usaco2006 Open]County Fair Events 参加节日庆祝【dp+树状数组】

    把长度转成右端点,按右端点排升序,f[i]=max(f[j]&&r[j]<l[i]),因为r是有序的,所以可以直接二分出能转移的区间(1,w),然后用树状数组维护区间f的max, ...

  10. P3349 [ZJOI2016]小星星

    传送门 题意都需要看题解才能明白我是不是已经废了 题意就是求一个从树\(S\)到图\(T\)的映射,满足若树上的两个点有边,则它们映射在图中的两个点也连有边,且不能有多个点映射到同一个点 我们先不考虑 ...