开发项目时候第一次遇到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. ubuntu语言设置成汉语

    打开设置system setting,进入语言支持,有语言和地区格式.下载须要的语言并应用到整个系统. 按说明来就可以 这样的方法使得部分英语变为汉语.

  2. 《Java设计模式》之接口模式

    -----------模式是思想的体现,而非详细的实现. 抽象的讲,类的接口是类同意其它类对象訪问的方法与字段集.接口通常代表一种承诺,即方法须要实现接口方法名表示的操作,遵循代码凝视和其它文档说明. ...

  3. C++学习之构造函数中的异常处理

    构造函数中可不可以抛出异常?当然可以.从语法上来说,是可以的:从实际情况来看,现在的软件系统日渐庞大和复杂,很难保证 Constructor 在执行过程中完全不发生一点异常. 那么,如果构造函数中抛出 ...

  4. Python开发【第*篇】【模块】

    模块分为三种: 自定义模块 第三方模块 内置模块 1.模块导入 import model from model.xx.xx import xx from model.xx.xx import xx a ...

  5. [软件分享]aboboo英语复读机 使用心得

    软件名称:aboboo www.aboboo.com 作用:英语复读,社区互动,丰富的材料,可以全方位锻炼听说能力. 技巧1:如何锻炼口语? 注册一个帐号,登陆后下载使用社区自带的课件,然后使用“随意 ...

  6. 用jquery给元素动态绑定事件及样式

    网页输出的时候,可以用jquery给各种元素绑定事件,或设置样式. 之所以这样做,好处是节省代码,尤其适合元素很多,并且元素的事件对应的函数雷同的情况. 看看以下代码: <div id=&quo ...

  7. 2016/1/6 输出菱形 while语句计算阶乘分数之和

    public class LingXing { public static void main(String[] args) { //打印菱形 for (int x=1;x<6;x++){ fo ...

  8. {转}Python IDLE中文乱码

    http://hi.baidu.com/yobin/item/166e3a46537781d3c1a59257 乱码原因:因为你的文件声明为utf-8,并且也应该是用utf-8的编码保存的源文件.但是 ...

  9. YTU 2640: 编程题：运算符重载---矩阵求和

    2640: 编程题:运算符重载---矩阵求和 时间限制: 1 Sec  内存限制: 128 MB 提交: 484  解决: 190 题目描述 /* 有两个矩阵a和b,均为2行3列.求两个矩阵之和. 重 ...

  10. 解决jQuery uploadify在非IE核心浏览器下无法上传

    之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传.经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox.chrome.36 ...