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