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

tunny 发布于2019-08-29 12:19 / 983人阅读

摘要：起因在移动端使用布局时图片也需要用单位。例如原本提高倍写成这样浏览器解析就会准确多了。下面提到的办法就是的方案怎么做思路单位数值变大了，整体也会变得很大，需要缩小回原来的尺寸。本文同时发布在的博客

起因

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

有哪些方案？

【百分比 background-position】

既然不能写固定单位，那么用百分比应该可以吧？
其实上面的截图正是用的百分比，网络上见到大多数也有提到这个方法，但博主的实践来看，并没有效果，或许是哪里没做好..

【提高数值精度】

浏览器没办法精确的处理小数，那么提高数值精度就好了吧。
例如原本 `23.12456rem` ,提高 100 倍, 写成 `2312.456rem` 这样浏览器解析就会准确多了。

下面提到的办法就是【2】的方案

怎么做？ 思路

单位数值变大了，整体也会变得很大，需要缩小回原来的尺寸。

缩小尺寸可以使用 css 的 zoom，或者 transform scale，建议使用后者，原因可以看下最后的【参考文档】

小障碍

从图中可以看到，scale 的缩放并不会影响到布局

那么可以借助伪元素让要缩放的图片脱离文档流

编写代码

最后写下以下代码

.icon-my {
    width: 2.13333rem;
    height: 2.13333rem;
    position: relative; /* 相对定位 */
}

.icon-my:after {
    content: "";
    width: 10000%;  /* 放大100倍 */
    height: 10000%;
    position: absolute; 
    left: 0;
    top: 0;
    background: url(icon-index.png) no-repeat -245.33333rem 0; /* 单位尺寸放大100倍 */
    background-size: 593.06667rem 458.66667rem;
    transform-origin: 0 0; /* 不从中心点缩放 */
    transform: scale(0.01); /* 缩放回原尺寸 */
}

一些别的研究

相对于维护麻烦的 css sprite，其实还有 Data URI（base64的方式），而且不会遇到文章里想要解决的问题，推荐阅读【参考文档】里的资料

在 ~~不远的将来~~ 人们会逐渐用上 http2，借助多路复用的特性，不做 css sprite 看样子性能会更好。

据说缩放 100 倍，在移动页面上会导致严重性能问题，但博主暂时没试出来..

参考文档

移动端性能大比拼：CSS Sprites vs. Data URI
假如HTTP/2已经普及
zoom和transform:scale()的区别
移动端适配之雪碧图(sprite)背景图片定位 (百分比方案)
移动端web app自适应布局探索与总结 (提高数值精度方案)

github库

https://github.com/think2011/gulp-icons
相关代码和调试可以看下上面的代码库，也欢迎 star 收藏。

本文同时发布在 think2011的博客 2017-03-31 20:07:23

GPU云服务器云服务器应用的是rem单位类的缺失问题 rem单位解决问题的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111814.html

移动前端 - 收藏集 - 掘金

摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...

Jochen 2019-08-29 12:43 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
构建自适应的手机页面

摘要：从事开发好多年，但是手机页面开发较晚，所以最开始的时候，为了做微信应用的开发，各种饿补，但是为了将设计稿精准的适配在各种尺寸的手机上还是太坑，所以找了些资料后，借鉴了一些成熟的网站，分享出来，欢迎拍砖。从事PC Web开发好多年，但是手机页面开发较晚，所以最开始的时候，为了做微信应用的开发，各种饿补，但是为了将设计稿精准的适配在各种尺寸的手机上还是太坑，所以找了些资料后，借鉴了一些成...

itvincent 2019-08-21 10:30 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

Benedict Evans 2019-08-21 10:44 评论0 收藏0
移动端web app自适应布局探索与总结

摘要：方案的简单介绍基于前提页面元素的布局尺寸全都以设计稿为基准等比例设置。给根节点设置一个基础值，然后页面的所有元素布局均相对于该值采用单位设定。 1、困扰多时的问题在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的...

wangjuntytl 2019-08-28 18:21 评论0 收藏0