看家本领系列：完美解决rem布局闪烁的问题

最近在做一个H5项目的时候，应用了rem布局，在打开页面的时候，总是会闪烁，在网上找了大伙的解决方案，但是都不能完美解决所有尺寸的屏幕的问题。主要是android的手机尺寸太多。而且客户还要求在电视屏幕展示，尺寸也不确定。

网上的解决的方案是，在css样式中预设各种尺寸的媒体查询，根据不通的尺寸给不通的font-size的值，这样可以解决部分设备的问题，前提是设备的尺寸必须准确的卡在固定的几个尺寸上。如果设备的尺寸不在预设的点，还是会闪烁，至少闪烁的不厉害。

问题分析

比如我们预设的font-size初始值是按照375px的iphone设置的，在这种情况下在该屏幕尺寸的手机打开是不会闪烁的

如果屏幕尺寸比375px大，闪烁的时候是由小变大的过程

如果屏幕尺寸比375px小，闪烁的时候是由大变小的过程

了解原理

rem布局的核心代码

在Html头部插入如下代码js代码

function resetRem() {
    var html = document.querySelector("html");
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    //参考375校准 相当于 width=100%==10rem
    var size = parseInt(oWidth) / 10;
    html.setAttribute('style', 'font-size:' + size.toFixed(4) + "px");