简单解决js计算rem单位首次加载页面瞬间布局错乱的问题

标签: 移动端
2人阅读 评论(0) 收藏 举报
分类:

在写移动端布局时,有些人喜欢用单纯的CSS+百分比来控制字体单位,而有些人则喜欢用js来计算字体的单位以及处理屏幕兼容。这种方法其实是挺不错的,比用媒体查询能减少能多的后期处理。但是相信用过这个方法的人不少都会发现,在我们首次打开页面的时候,有时会出现一闪而过的布局错乱的问题,虽然只是短短的一瞬间,但每次看到都会让人觉得很不舒服。

	(function() {
		document.addEventListener('DOMContentLoaded', function () {
			var html = document.documentElement;
			var windowWidth = html.clientWidth;
			html.style.fontSize = windowWidth / 3.2 + 'px';
		}, false);
	})();

后来想明白了,页面加载是遵循“从上到下”的顺序,假如在body里面的主要内容还没加载前,则先把字体大小计算好,这样是不是就不会出现页面布局一瞬间的崩塌了,但是最后发现这个方法还是没用。但是我们知道了是css加载了再执行js才会出现的问题,问题在于页面一开始时没有基础字体大小,所以才会出现一瞬间的错乱,这样我们直接在公共的css文件设置html的根字体为font-size:100px;这样问题就解决了。等到js计算出新的根字体大小就会把原来css定义的大小覆盖,这样就可以解决也页面打开时的瞬间崩塌现象了

查看评论

【HTML5移动端开发】[rem + 百分比布局] 加载抖动(高度不一致)解的决方法

解决移动端rem+百分比布局加载瞬间页面错乱的方法 以下的内容和观点未经大牛级别验证,有错误的地方请大牛留言指教~! 移动端布局有很多种,这里我最常使用到 rem+ 百分比 的布局方式(高度/字...
  • qq_31381917
  • qq_31381917
  • 2016-11-07 12:44:01
  • 3077

移动端rem布局导致页面加载瞬间无样式

移动端rem布局导致页面加载瞬间无样式
  • ink_if
  • ink_if
  • 2017-11-14 19:24:44
  • 442

rem布局,系统字体大小发生变化是,页面样式错乱的问题

最近做的一个APP,昨天测试的时候,发现在大多数手机上页面用rem布局,都是可以适配的,但是在一些手机上(比如三星A8000,默认字体大小比较大)出现了混乱,看上去像是宽度不够,有些元素被挤下来,整个...
  • wxy66666666
  • wxy66666666
  • 2017-02-16 23:27:36
  • 1014

关于rem加载闪烁的问题

笔者在开发H5页面的时候,需要处理移动端的适配问题,比如在浏览器手机模式ctrl+F5连续强刷或者手机端加载过程中网速过慢的时候就会出现0.1s(比喻的时间).出现闪烁的过程,很影响用户体验,相信遇见...
  • unique_zheng
  • unique_zheng
  • 2017-11-23 16:49:20
  • 259

rem布局,页面加载时先放大一下再回复正常

先贴上我的rem布局的一段js: window.onload=function(){ setRemSize(); window.addEventListener("resize",setRemS...
  • wxy66666666
  • wxy66666666
  • 2017-04-23 01:14:42
  • 1150

rem布局加载闪烁问题

先上体验地址:http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage扫描二维码:问题rem布局...
  • u013778905
  • u013778905
  • 2017-09-11 22:25:31
  • 1242

使用jquery解决页面在加载时出现短暂的布局紊乱

一般在使用一些开源的JavaScript UI库,在页面 中加入了比较复杂一些的组件,每次在页面加载时,都有可能会产生短暂的页面布局紊乱(大概会持续2s左右),这样的效果会给用户一种不好的体验感。在实...
  • VincenLlin
  • VincenLlin
  • 2015-05-17 21:30:02
  • 1593

手机端页面自适应最简单解决方案—rem布局

该方案目前已过时,这里是更加完美的替代方案——rem布局(进阶版) 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局flex(什么是flex...
  • z469590925
  • z469590925
  • 2017-12-18 10:12:47
  • 1011

移动端开发rem单位的格式化js文件flexible.js

有关前端开发的移动端适配, 借助rem可以省去很多媒体查询的工作, 对于rem, 可以在css中做一些规定, 也可以直接通过js来控制, 这样, 更是最大程度的还原了设计图.以下代码为转载;(f...
  • viciousDear
  • viciousDear
  • 2016-08-19 16:14:33
  • 1851

响应式布局之尺寸单位rem使用

web实际开发过程中,特别是移动端的页面,会遇到元素尺寸及字体在不同分辨率设备上表现差异较大,甚至严重影响用户体验; 我现在的做法是使用rem作为尺寸单位,来实现页面内元素尺寸及字体在不同宽度设备下...
  • byc233518
  • byc233518
  • 2015-10-25 11:50:36
  • 4586
    个人资料
    持之以恒
    等级:
    访问量: 4735
    积分: 251
    排名: 30万+
    文章分类
    文章存档