有效解决 css sprite 图片使用 rem 单位边角缺失的问题

起因





在移动端使用 rem 布局时 sprite 图片也需要用 rem 单位。
但由于浏览器对小数单位精度解析的差异,在不同设备上一些图片看起来会缺了一点点,或者多了一点点..

有哪些方案?

  1. 【百分比 background-position】
    既然不能写固定单位,那么用百分比应该可以吧?
    其实上面的截图正是用的百分比,网络上见到大多数也有提到这个方法,但博主的实践来看,并没有效果,或许是哪里没做好..
  2. 【提高数值精度】
    浏览器没办法精确的处理小数,那么提高数值精度就好了吧。
    例如原本 23.12456rem ,提高 100 倍, 写成 2312.456rem 这样浏览器解析就会准确多了。

阅读全文