H5W3
当前位置:H5W3 > CSS3 > 正文

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点几,没毛病,关键是我放大还好,只要缩小到一定的程度,页面元素就不跟着一起伸缩了。
好吧,我想起来了,谷歌有个最小字体限制的,高版本把这个限制去了,所以我的看起来正常。

小记一笔,与君共勉

好了,终于完了,睡觉😪~~~

本文地址:H5W3 » rem学习遇到的问题笔记