问题的产生:
公司的一个项目,第一次使用了rem布局,效果非常的理想,在定位的时候都使用rem去布局,能在不同的设备,让定位的元素的位置保持在预想的位置,本以为第一次是完美的,
但是,但是,但是,悲剧发生了,当周一上班的时候,测试的都没问题,就是在UC使用的时候,里面的东西都会被缩小或则用的rem都去按照UC默认是12px去计算了,真是。。。。(一样的内核,UC真给webkit丢L)
,然后我就去百度,还有各大贴吧去找解决方法,都没有解决,也没有用JS去实现的想法,这可怎么办才好,马上就要上线了,重写也不现实!!!真的那一刻就决定不再爱UC了。
问题的解决:
但是为了用户的体验,该做的还要做的啊,也不能让这一点点的小东西给打败啊,查资料了解到,好像是UC中也不默认字体是16px,(默认12px),
应该是我在js中重置的全局的fontSize没有起到作用,(也可能是UC默认是先去加载CSS,而不按规定的去从上倒下的依次执行),
那么我就大胆是一试,在html,body中写上了一句【font-size:20px】(因为我的js在把1rem设置为了20px,所以这里就简单粗暴的写了20px,设计稿如果给了300px,在写css的时候就是15rem),
没想到就是这么一句,解决了全部的问题,春天又来了!!
上代码
上面啰嗦了很多,下面一次性为大家把代码贴出来,简单明了~
这一段代码要写到title的上面,就是让html页面加载的时候,先去加载这段代码,那么全局的fontSize就被设置为了20px,你就可以愉快的使用1rem=20px了, 上面是用的ID获取的,所以就要给html标签写一个id=‘html’去获取。
这里还要再啰嗦啰嗦,就是因为写在了这里,别的浏览器都没有问题,但是估计UC是先去执行css部分,把这一段代码先忽略了,把1rem默认为12px了,页面中都是按照1rem=20px来做的,所以就都乱了;
解决问题的出现了
解决了UC计算的问题*/
}
结论:
这样就解决了问题,UC在加载的时候,就会按照1rem=20px去执行了,那么就跟咱们预想的一样了!
可能有朋友会问,不会影响其他的浏览器吗?经过测试是没问题的,因为css中也是20px。通过js去设置的也是20px,不会去修改它,这样关于UC浏览器用rem就不会再出现布局混乱的情况了!
后期想到什么再补充,希望大家多多的补充,多多的指教,谢谢!!!