rem布局进入页面样式错乱解决
开发项目时候第一次遇到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布局进入页面样式错乱解决的更多相关文章
- 架构师小跟班:SSL证书免费申请及部署,解决页面样式错乱问题完整攻略
申请证书 1.登录阿里云控制台,产品与服务,选择SSL证书 2.进入SSL证书页面,点击“购买证书”,选择免费1年的证书类型,点击“立即购买” 3.返回SSL证书页面,可以看到证书列表里多了一条记录 ...
- lib-flexible 结合 WKWebView 的样式错乱解决方法
技术栈 lib-flexible 是淘宝的可伸缩方案 WKWebView 是ios8以上支持的网页控件 问题场景 最新公司一个项目使用 lib-flexible 来做移动端的伸缩解决方案,页面在saf ...
- ASP.NET后台JS弹框使前台页面样式丢失 解决办法
Response.Write("<script>alert('您还没有上传相关图片!');</script>");是向前台输出js 应该用下面的方法 Cli ...
- 81.node.js前端html时页面格式错乱解决办法
var http = require("http"); var url = require("url"); var fs = require("fs& ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- 手机端页面自适应:rem布局
rem布局非常简单,首页你只需在页面引入这段原生js代码就可以了 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ...
- 手机端页面自适应解决方案—rem布局(该方案目前已过时)
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
- rem手机端页面自适应布局(待修正下一篇完美布局)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- jquery 联动 年月日
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery实例 - 生成年 ...
- dorker 安装
http://www.docker.org.cn/book/install/install-docker-win7-win8-requirements-38.html1. 你先去下载Docker To ...
- Android学习笔记-传感器开发之利用传感器和Tween开发简易指南针
本次我们学习Android传感器的开发,前面已经介绍过了,tween的使用,所以,我们可以结合传感器与tween动画,开发简易的指南针. 首先先介绍一下传感器的相关知识, 在Android应用程序中使 ...
- 【bzoj4443】[Scoi2015]小凸玩矩阵
第K大也就是第n-K+1小,所以就可以的二分答案了 (江哥讲过一道类似题) 二分答案找出比当前答案小的数的位置的坐标,判断一下是否可以选出满足不在同一行同一列的n-K+1个数,然后就可以跑匈牙利了,对 ...
- 在shell脚本中执行shell脚本
任务下发 主节点脚本 任务管控脚本 [root@admin1 ~]# cat mytest.sh echo lovecode [root@admin1 ~]# cat myfor.sh #!/bin/ ...
- VC/MFC列表CListCtrl类的LVCOLUMN和LVITEM详解
列表视图控件(List Control)列表视图控件是一种非常常用的控件,在需要以报表形式显示数据时,列表控件通常是最好的选择,许多专用的数据报表控件,也是在它的基础上派生而来.与树视图类似,列表 ...
- POJ 1330 LCA裸题~
POJ 1330 Description A rooted tree is a well-known data structure in computer science and engineerin ...
- leetcode 690. Employee Importance——本质上就是tree的DFS和BFS
You are given a data structure of employee information, which includes the employee's unique id, his ...
- 解决jQuery uploadify在非IE核心浏览器下无法上传
之前上传了一个通过Flash实现多文件上传,但是在IE正常运行,FireFox 不能正常上传.经过反复研究学习,之所以firefox和360浏览器无法正常运行,是因为FireFox.chrome.36 ...
- python 获取当前文件夹路径及父级目录的几种方法
获取当前文件夹路径及父级目录: import os current_dir = os.path.abspath(os.path.dirname(__file__)) print(current_dir ...