移动端使用rem布局时解决页面闪烁的问题
舒彬琪 HTML 2019-10-26 00:02:22 664 浏览

移动端使用 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;}
继续浏览有关 rem 的文章
发表评论
评论列表
本站使用PbootCMS自带留言实现单文章留言!
分享按钮
附件已下载在这里

附件下载成功

详情请到您的下载文件夹中查看

下载更多资源

PB教程

PB二开

搜索

赞赏

加入Q群