rem布局进入页面样式错乱解决
2024-10-20 12:00:34
开发项目时候第一次遇到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();" />
最新文章
- CSS3多列
- JS原生第四篇 (帅哥)
- UML类图之类与类的关系
- UVa 10900 - So you want to be a 2n-aire?
- Spring Controller 获取请求参数的几种方法
- List<;T>;分组一
- poj 1018 Communication System 枚举 VS 贪心
- 某马-某淘商城的day01--->;分析,工程搭建,tomcat插件启动工程,svn,反思
- google ip地址
- Drools文档(八) 规则语言参考
- ARM与FPGA通过spi通信设计1.spi基础知识
- Java锁与CAS
- 33.Odoo产品分析 (四) – 工具板块(4) – 问题追踪及群发邮件营销(1)
- Nginx proxy_protocol协议
- 升级Android Studio到1.0.2的问题解决
- Spark笔记之累加器(Accumulator)
- 通知栏消息(Notification)初步
- css3动画属性系列之transform细讲scale缩放
- numpy里的randn
- UVALive-4670 AC自动机入门题 求出现次数最多的子串