rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小

问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。

至于为什么设置为50px；首先，设计稿是基于750px来设计的，我们重构稿实现的时候根元素大小应该是设置为50px（在规定1rem=100px的前提下）；其次，720px和750px这两个设备尺寸，是安卓和IOS设备中占比比较大的设备尺寸。

所以：移动端适配可以采用js动态计算及结合在公用样式中设置默认字体大小（html{font-size:50px}）

 (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 {docEl.style.fontSize = 100 * (clientWidth / 750) + "px";}var html = document.getElementsByTagName("html")[0];var settedFs = (settingFs = parseInt(100 * (clientWidth / 750)));var whileCount = 0;while (true) {var realFs = parseInt(window.getComputedStyle(html).fontSize);var delta = realFs - settedFs;//不相等if (Math.abs(delta) >= 1) {if (delta > 0) settingFs--;else settingFs++;html.setAttribute("style","font-size:" + settingFs + "px!important");} else break;if (whileCount++ > 100) break;}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener("DOMContentLoaded", recalc, false);})(document, window);

仓促时间仓促文章。

移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题相关推荐

Android开发——Android手机屏幕适配方案总结
0. 前言 Android的屏幕适配,即使得某一元素在Android不同尺寸.不同分辨率的手机上具备相同的显示效果,这个问题一直以来都是我们Android开发者不得不面对的问题.本文参考了很多前人的博 ...
iOS开发UI篇－在UItableview中实现加载更多功能
iOS开发UI篇-在UItableview中实现加载更多功能一.实现效果点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据. 二.实现代码和说明当在页面(视图部分)点击加载更多按钮的时 ...
vue开发手机页面闪烁_Vue页面加载闪烁问题的解决方法_婳祎_前端开发者
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换也就是说,在使用v-if时,若值为false,那 ...
wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件
场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...
Android应用开发提高系列（5）——Android动态加载（下）——加载已安装APK中的类和资源...
前言 Android动态加载(下)--加载已安装APK中的类和资源. 声明欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://ov ...
android实现新闻内容显示功能,Android开发实现自定义新闻加载页面功能实例
本文实例讲述了Android开发实现自定义新闻加载页面功能.分享给大家供大家参考,具体如下: 一.概述: 1.效果演示: 2.说明:在新闻页面刚加载的时候,一般会出现五种状态未知状态(STATE_U ...
MapGis二次开发——基础地图目录树控件的加载
MapGis二次开发--基础地图目录树控件的加载第一步:添加MapGis引用 MapGis动态库位置是在你安装位置下的\Program\plugin下,例如我的安装位置就是:D:\MapGIS 10 ...
《android开发艺术探索》笔记之Bitmap的加载和Cache
<Android开发艺术探索>笔记之Bitmap的加载和Cache<一> 我放暑假前,就在图书馆借了一本<Android开发艺术探索>,这也是我看到很多人推荐的.之 ...
【Android开发那点破事】打开APP加载页面实现
今天的破事呢就说说APP加载页面的实现.一般情况下,当APP打开的时候,我们需要做很多事情,比如检查网络连接啊,初始化一些配置啊等等.我们可以让这些事情在APP完全打开之前做完,然后呢在打开的过程中显 ...

移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题

rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小

所以：移动端适配可以采用js动态计算及结合在公用样式中设置默认字体大小（html{font-size:50px}）

移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题相关推荐

最新文章

热门文章