当前位置: 首页 > news >正文

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

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);

仓促时间仓促文章。

 


http://www.taodudu.cc/news/show-6105809.html

相关文章:

  • 实现边坍塌的网格简化方法
  • 盒子模型塌陷解决办法
  • LAMMPS模拟in和data文件集合
  • GAN_1——基础知识
  • [GAN学习笔记] 基础GAN(三)——WGAN
  • css防止高度塌陷,css之高度塌陷及其解决方法
  • 计算机图形学笔记十:Geometry3(网格处理)
  • 怎么样上台演讲(结合ppt)。。超级实用。。。
  • 商务流程
  • 业务范围(business area)
  • 国内外知名云服务公司介绍
  • 什么是企业管理咨询服务?
  • MiL.k x Bithumb x Yanolja宣布建立三方商务及市场营销合作关系
  • 移动商务,还是短信商务?
  • 什么样的人适合做外贸?能做好外贸?(非外贸零售)
  • 供应链服务平台方案:助供应链服务公司实现商品+决策+物流+售后协同办公
  • 公司的服务类型简介
  • 企业服务
  • 视频剪辑,就上这5个网站找素材,免费可商用。
  • 书单素材怎么找?教你寻找方法
  • 自媒体都在用的5个素材网站,视频、音效、图片全部免费下载~
  • 6个高清图片素材网站,找图片素材就靠他们了
  • 找高清视频素材,就上这6个网站。
  • 找高清图片素材,这8个网站就够了
  • 装甲板识别
  • 【图片新闻】低空穿越的美军MC-130J突击队II特种作战运输机
  • 智能物流仓储机器人|海格里斯HEGERLS货物夹抱式防倾倒装置四向穿梭车
  • 机器人学回炉重造(1-2):各种典型机械臂的正运动学建模(标准D-H法)
  • 装甲逆袭-NPC对话处理
  • 装甲逆袭-地图加载