开发项目时候第一次遇到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. Linux学习系列之lvs+keepalived

    LVS简介 LVS介绍 LVS是Linux Virtual Server的缩写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统,属于4层负载均衡 ipvs和ipvsadm的关系 我们使用配置LV ...

  2. 理解C语言中指针的声明以及复杂声明的语法

    昨天刚把<C程序设计语言>中"指针与数组"章节读完,最终把心中的疑惑彻底解开了.如今记录下我对指针声明的理解.顺便说下怎样在C语言中创建复杂声明以及读懂复杂声明. 本文 ...

  3. 网卡bood

    一.网卡bood (1)网卡bond(绑定),也称作网卡捆绑.就是将两个或者更多的物理网卡绑定成一个虚拟网卡.网卡是通过把多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在应用部署 ...

  4. MySQL Study之--MySQL压力測试工具mysqlslap

    MySQL Study之--MySQL压力測试工具mysqlslap 一.Mysqlslap介绍     mysqlslap是MySQL5.1之后自带的benchmark基准測试工具,类似Apache ...

  5. Android源代码文件夹结构说明

    在学习Android的过程中,学习写应用还好.一開始不用管太多代码.直接调用函数就能够了,可是工作中却须要改动到framework之类的东东 所以感觉開始纠结了,又是初学,非常多不懂,所以就去找了关于 ...

  6. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  7. kafka 生产者消费者 api接口

    生产者 import java.util.Properties; import kafka.javaapi.producer.Producer; import kafka.producer.Keyed ...

  8. chmod a+w . 权限控制 su、sudo 修改文件所有者和文件所在组

    对当前目录对所有用户开放读写权限 chmod a+r . $ sudo chmod -R a+w /usr/lib/python2.7 所有用户添加文件的写权限 [linux]su.sudo.sudo ...

  9. ZOJ 3609 Modular Inverse（扩展欧几里德）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4712 The modular modular multiplicat ...

  10. flash、flex builder、flash builder、 air的关系

    flash VS flex builder flash被adobe收购的时候是flash8,已经可以AS2面向对象了. 而被adobe收购后,adobe准备把flash打造成一个开发工具.就比如JBU ...