鄙人前端菜鸟一枚,就因为是菜鸟才要经常总结经验和教训,如果你跟我一样的话可以来看看,知识在于积累嘛,不过大牛看到也别嘲笑, 可能对你们来说不值一提,但对我来说这就是经验。
今天就来谈谈移动端rem布局遇到的坑。之前听说移动端用rem布局有很多坑,但我没发现什么坑点,反而觉得rem相当好用,公司现在的这个项目就是用rem布局,为了适配不同的分辨率感觉rem很方便,我用的是下面这种计算方式,不管你分辨率多大,我先获取了再说,然后把你根元素html的font-size设成页面宽度的十分之一,下面这段代码相信大家都看得懂。
搭建完页面出来的效果确实很好,在不同分辨率的手机上都跑了一遍,适配很好,但是不久我就发现一个bug,就是跳转页面的时候会有代码闪一下,然后再出来页面,或许是页面有图片的时候,跳转的时候图片变得很大然后闪一下,虽然只是0.0几秒的闪现,但是用户体验很不好,一开始我以为是js文件加载顺序的问题,然后调整了一下js文件的引入顺序,把rem的计算方式引在最前面,当然还有其他一些文件,都做了相应的调整,但是然并卵。因为页面和逻辑都写的差不多了,所以昨天我找了一天的bug,想找找问题出在哪里,各种改各种测,还是然并卵,我甚至用上来阿里矢量图库的字体图标,放上去效果很好,图片没有闪现的问题,把我高兴的啊,真他么有成就感,没高兴一分钟我就又发现一个新问题,因为太想解决这个问题所以没想那么多。事实上,这些图片都是要通过数据请求下来的,说到底还是一个img,我用的字体图标显然是不可以的,所以此方法以失败告终,找了一天实在没找到,后面我就尝试给需要图片的标签加背景图片,而不是直接给他加img标签,请求数据的时候也是可以渲染的,谢天谢地,效果很好,没有闪现的情况,松了一口气,终于解决了,但是后面因为点击跳转页面太突兀,打算在跳转的时候写个过度动画,当时我就灵光一现,如果页面有闪现的情况但又不是逻辑错误的时候(就是你怎么都找不出原因所在),可以给页面加个罩子,给他加这么个东西。
设置一个0.几秒的过渡,既能优化用户体验,又能优化页面布局,说干就干,就是按照这种思路给他加上一个罩子,完事后测试了一下,真的完美啊,又学到一招,当你实在找不出问题所在的时候,当然了,这个问题不能影响页面的功能,你可以把问题盖起来不让别人看到,哈哈。
如果有同学遇到跟我一样的问题,以上两种都是解决方式,看你用哪种了,欢迎各位同学来交流技术经验。
本文来自:湖南第一李青(LeeSin)