开发项目时候第一次遇到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. Installation error: INSTALL_FAILED_VERSION_DOWNGRADE Android

    我们在安装新的 APk 的时候.会出现 Installation error: INSTALL_FAILED_VERSION_DOWNGRADE 原因:  是由于 androidversionCode ...

  2. IIS6下PHP配置(转载)

    Windows 2003+IIS6+PHP5.4.10配置PHP支持空间的方法 (2013-01-10 16:48:56)标签: php it php环境 php配置 分类: PHP环境配置简介:一般 ...

  3. 2015ACM/ICPC Asia Regional Changchun Online /HDU 5438 图

    Ponds                                   Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 1310 ...

  4. ios33--线程通信

    // // ViewController.m // 06-掌握-线程间通信 // // atomic:为set方法加锁,线程安全,需要消耗资源. // nonatomic:不为set方法加锁,非线程安 ...

  5. arm-linux交叉编译工具链的制作（基于S3C2440）【转】

    本文转载自:http://eric-gao.iteye.com/blog/2160622 制作arm-linux交叉编译工具链一般通过crosstool工具或者crosstool-NG,前者使用方便, ...

  6. Applications using Launch Screen Files and targetting iOS 7.1 and earlier need to also include a Launch Image in an Asset Catalog.

    在使用xcode6建的项目时,有时在ios7模拟器下会出现一下情况 导航栏上方和tabbar下方会有黑边 并且会有一下警告: Applications using Launch Screen File ...

  7. windows下mongodb设置用户名密码&用python连接

    环境: 主机:WIN10 python版本:3.5 mongodb版本:3.4.2 开发环境:pyCharm mongodb设置用户名密码: 编写mongodb配置文件mongodb.confdbpa ...

  8. bzoj2594 [Wc2006]水管局长数据加强版——LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2594 时间倒序一下,就是 魔法森林 那道题: 有个不解的地方,是 access 里面关于 p ...

  9. matlab采用mex编译多个cpp文件

    最近在看matlab code时,由于本人使用的是64系统,而code中的mex文件时在32位系统上编译的,所以需要重新自己编译maxflowmex.cpp,但是直接mex maxflowmex.cp ...

  10. bzoj 4806: 炮【dp】

    同1801 注意到一行只能放012个炮,我们只需要知道列的状态,不用状压行 所以设f[i][j][k]表示前i行有j列有1个炮,有k列有2个炮的方案数 然后分情况讨论转移就行了 #include< ...