开发项目时候第一次遇到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. C++ RTTI介绍

    一.定义:RTTI:Run Time Type Identification ,执行时类型识别:指程序可以使用基类的指针或引用来检索其所指对象的实际派生类型. 二.使用方式:C++中有两个操作符提供R ...

  2. android自己定义控件系列教程----视图

    理解android视图 对于android设备我们所示区域事实上和它在底层的绘制有着非常大的关系,非常多时候我们都仅仅关心我们所示,那么在底层一点它究竟是怎么样的一个东西呢?让我们先来看看这个图. w ...

  3. 字符串匹配之KMP算法（续）---还原next数组

    相信通过今天的文章,你会对KMP的认识更加深入一层,不止停留在知道怎样计算的层面上了,废话不多说,開始. 通过前面的第一篇文章,知道了怎么求next数组,相信非常多喜欢刨根问底的人就会问,我依照你的做 ...

  4. mysql查看所有存储过程,函数，视图，触发器，表

    查询数据库中的存储过程和函数 方法一: select `name` from mysql.proc where db = 'your_db_name' and `type` = 'PROCEDURE' ...

  5. Android 最火框架XUtils之注解机制具体解释

    在上一篇文章Android 最火的高速开发框架XUtils中简介了xUtils的基本用法,这篇文章说一下xUtils里面的注解原理. 先来看一下xUtils里面demo的代码: @ViewInject ...

  6. 服务器无法处理请求。 ---> 未将对象引用设置到对象的实例

    服务器无法处理请求. ---> 未将对象引用设置到对象的实例. 简短说下我遇到的问题.webservice部署到服务器上后,访问方法报上面的错误,最终原因为改方法需要操作文件夹,加上了相应的权限 ...

  7. Oracle中长度为0字符串与null等价

    不试不知道,Oracle中,长度为0的字符串'' 居然与null等价! 众所周知,null代表空,什么都不存在,而一个字符串'',虽然长度为0,但毕竟已经是一个字符串,二者怎么能等价,混为一谈呢. 在 ...

  8. android:模拟水波效果的自己定义View

    Github地址:https://github.com/nuptboyzhb/WaterWaveView 欢迎Fork.欢迎Star 1.先看效果 watermark/2/text/aHR0cDovL ...

  9. 记录一下收集到的clojure相关的东东

    https://github.com/plexus/chestnut 一个用来调试clojurescript的工具,解决 Clojure, ClojureScript, and CSS的reload问 ...

  10. MessageBox.Show

    MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: .MessageBox.Show("Hello~~~~"); 最简单的,只显示提示信息. .Mess ...