记一次rem踩坑之旅

背景

前几天，几个手机端和电脑端页面需要开发，手机端页面为了更好的适配，当然就用了rem单位。
设计稿是750px的，就直接通过想着设计稿上的元素是多少像素，css就跟着是多少的rem就好了，简单的换算了下，三行代码就来了

html {
    font-size: calc(100vw / 750);
}

当时也没有想太多，反正觉得现在手机浏览器兼容性一般都不错，就果断的用了。可第二天，同事说再他浏览器上大了好多，我想可能是vw单位有兼容性问题，css不能做的，果断的换了js来实现，小case，代码来了

var w = window.innerWidth;
document.documentElement.style.fontSize = w / 750 + 'px';

想着完事大吉了，可曾想，好戏在后头

这过程中，测试也没有怎么测试，今天代码上到线上，才告诉我说安卓机有问题。开始我有点不信，直到我看到了真相，不得不信了。

看到的眼前的界面，首先应该定位问题，才好解决问题。

定位问题

看了半天看不出什么问题，于是决定抽丝剥茧，剔除其他代码，就留一张图片，不断的改变大小，没觉得有什么问题。
突然想到，把浏览器的宽度，根元素的字体大小，以及图片的实际大小给打印出来看看。这下好了，根元素字体大小是0.5px，没啥问题，浏览器宽度是375，关键是图片大小为750px，我可设置的750rem呀，不是应该是375px吗？不带这样的。好吧，我错了，原来是因为这个浏览器根元素的字体大小不能小于1px。

解决问题

问题就这样阴差阳错的找到了，这还没完，得解决问题。

方案一

开始想着要不用js来测试根元素是不是不能小于1px，然后决定对页面进行整体伸缩。
可在我印象中，这样会造成页面模糊掉，于是果断放弃。

方案二

既然不能小于1px，那我大于应该是可以了吧，大多少才合适呢，值也不能够随便设置，不然以后还得边切图边拿个计算器在旁边算，想想画面很美观。当然可以使用一些工具来自动的处理，得去找来配置，但现在不想去折腾那些了，先解决燃眉之急吧。我开始想放大100倍，总感觉不太妥，于是放大了10倍，这样375宽的屏幕不就是5px了吗，5 > 1，这样总行了吧，相应的代码中的rem值得缩小10倍，不就完美解决了吗。

当然只是解决了基准，现在下一步得把代码中的值给替换掉。怎么做呢？

• 手动？不现实吧。。。
• 使用编辑器正则替换？正则可不能做加减乘除这种运算了

• 只能写个脚本来做了，很简单

  1. 读取文件
  2. 使用正则找到rem前面的数值，除以10，给出正则\d+(\.\d+)?
  3. 替换完成了，当然是写回去了哦

当当当，大功告成，完美收官！！！

等等，别急---

pc端问题

由于不是响应式的，pc端和手机端不是同一个页面，测试反馈pc端的页面在谷歌上显示不正常。
这还了得，IE不正常还情有可原，奈何谷歌也不正常，这不是存心跟我作对吗。
一看代码，原来同事也使用了rem单位。
关键是，我的浏览器上显示正常呀，可测试的电脑上的就是有问题。我吐槽了一句，你那是什么年代的浏览器呀。一看版本，75。。。
那尼(ÒωÓױ)！，我错怪你了

来，继续祭出我的屠龙刀，打开开发者工具，不停的调整字体大小。
根元素字体大小计算出来是2点几，没毛病，关键是我放大还好，只要缩小到一定的程度，页面元素就不跟着一起伸缩了。
好吧，我想起来了，谷歌有个最小字体限制的，高版本把这个限制去了，所以我的看起来正常。

小记一笔，与君共勉

好了，终于完了，睡觉~~~