移动端使用rem布局时解决刷新页面时出现的闪烁问题-长春网站建设【筱航科技】

发布时间:2020-03-16 23:16:00 作者:筱航科技 来源:本站 浏览量(81) 点赞(55)
摘要:大家在写手机站的时候经常会用到rem进行网页布局,那么你们在使用的过程中是否出现了刷新页面会有闪烁的问题呢?下面为大家简单的介绍下rem

  大家在写手机站的时候经常会用到rem进行网页布局,那么你们在使用的过程中是否出现了刷新页面会有闪烁的问题呢?

  下面为大家简单的介绍下rem

  移动端使用rem布局js代码

  REM是相对单位,是相对于HTML根元素。

  这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

  目前,除了IE8及更早版本外,所有浏览器均已支持rem。


  rem.js适配计算代码

window.onload = function(){
  /*750代表设计稿的宽度,设计稿是多少,就写多少;100代表换算比例*/
  getRem(750,100)
};
window.onresize = function(){
  getRem(750,100)
};
function getRem(pwidth,prem){
  var html = document.getElementsByTagName("html")[0];
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth/pwidth*prem + "px";
}

  rem.js 适配计算代码

// 移动端rem适配所有手机
(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';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

  CSS解决 rem.js 响应 闪烁 问题代码

  由于字体大小都是基于html的,所以在移动端做适配的时候,可以使用这样的方法,提前设置好预设设配,避免js未及时响应

@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;}


筱航科技主营业务: 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城

二维码

扫一扫,关注我们

声明:本文由【筱航科技】编辑上传发布,转载此文章须经作者同意,并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

筱航科技-您身边的网站建设专家

搜索千万次不如咨询1次

主营项目:网站建设,网络营销,SEO优化,微信小程序开发,LOGO设计,产品包装设计,虚拟主机,域名注册,网站安全检测,微信商城等

立即咨询 184-4312-4181
在线客服
点此联系在线客服!