杰晶网络

移动端使用 rem 单位时 css sprites 定位问题的解决
网页制作 2024/12/26 佚名
3 2

现在开发移动端 wap 页面，相信大家都会使用强大的 rem 单位去适配各种机型和屏幕；为了减少网络请求数量，提高网页访问性能，一般都会把多个小 icon 合并成一张 sprite 图，然后根据 background-position 进行定位；但是由于计算机的计算偏差，常常会导致 icon 的显示有1到2像素的偏差；

一、PC 端

如果在 PC 端，雪碧图的定位其实非常简单，不多说，直接上代码：

html 代码

<ul class="sprites-box">
    <li class="icon icon-bill"></li>
    <li class="icon icon-emailmsg"></li>
    <li class="icon icon-import"></li>
    <li class="icon icon-music"></li>
    <li class="icon icon-pay"></li>
    <li class="icon icon-search"></li>
    <li class="icon icon-speak"></li>
    <li class="icon icon-task"></li>
</ul>

css 代码

body, ul { margin: 0; }
ul { padding: 50px; list-style: none; overflow: hidden; }
li { float: left; margin: 10px; }
.icon { background-image: url('./sprite.png'); }
.icon-bill { background-position: -35px 0px;  width: 32px; height: 32px; }
.icon-emailmsg { background-position: 0px -32px; width: 32px; height: 32px; }
.icon-import { background-position: -32px -32px; width: 32px; height: 32px; }
.icon-music { background-position: -67px 0px; width: 32px; height: 32px; }
.icon-pay { background-position: 0px 0px; width: 35px; height: 32px; }
.icon-search { background-position: -67px -32px; width: 32px; height: 32px; }
.icon-speak { background-position: 0px -64px; width: 32px; height: 32px; }
.icon-task { background-position: -32px -64px; width: 32px; height: 32px; }

效果

移动端使用 rem 单位时 css sprites 定位问题的解决

因为其使用 px 定位，且屏幕单位和倍率都是固定的，所以可以完美的实现雪碧图效果；

二、移动端

在移动端，由于各种机型的屏幕倍率，使得使用 px 作为单位的布局会有很大的适配问题，所以现在主流的适配方案就是使用 rem 作单位，并且根据屏幕倍率计算 rem 的基值进行适配；

本人是以宽为 750 的设计稿为基础，每 1rem 的值为设计稿中 100px 的长度； 由于 icon 的大小尺寸基本一致，故稍微做了点处理，裁切掉了 icon 的透明部分，合成尺寸不统一的 sprite 图；

1、直接转换为 rem 单位 换算后以上雪碧图的 css 代码为：

body, ul { margin: 0; }
ul { padding: 0.5rem; list-style: none; overflow: hidden; }
li { float: left; margin: 0.1rem; }
.icon { background-image: url('./sprite.png'); background-size: 0.96rem 0.92rem; background-repeat: no-repeat; }
.icon-bill { background-position: -0.67rem -0.26rem; width: 0.28rem; height: 0.26rem; }
.icon-emailmsg { background-position: 0 -0.64rem; width: 0.26rem; height: 0.28rem; }
.icon-import { background-position: -0.26rem -0.64rem; width: 0.26rem; height: 0.28rem; }
.icon-music { background-position: -0.35rem 0; width: 0.32rem; height: 0.32rem; }
.icon-pay { background-position: 0 0; width: 0.35rem; height: 0.32rem; }
.icon-search { background-position: -0.32rem -0.32rem; width: 0.29rem; height: 0.27rem; }
.icon-speak { background-position: 0 -0.32rem; width: 0.32rem; height: 0.32rem; }
.icon-task { background-position: -0.67rem 0; width: 0.29rem; height: 0.26rem; }

效果：

移动端使用 rem 单位时 css sprites 定位问题的解决

细心留意可以看出，部分地方显示会有大概 1px 的偏差，这是由于不同手机计算偏差导致的，如果 icon 较为简单，可以接受这种效果也没关系，如果对 icon 显示的要求较高，则这种方式很明显不能达到要求；

2、转换为 rem 后通过 百分比进行定位

首先确认 background-position 使用百分比定位的概念：

属性值为百分比时，将以指定的点为重合点摆放雪碧图和显示 icon 的框。 简而言之，假设值为 10% 20%，则是将 sprite 图的 10% 20% 位置的点与显示框 10% 20% 的点重合（并不是 0% 0% 的点）

举个栗子：有一张 200X200 的 sprite 图，和一个 50X50 的 icon 显示框，这时如果设置 background-position: 0% 0%;

效果如下：

移动端使用 rem 单位时 css sprites 定位问题的解决

如果设置 background-position: 100% 100%; ，会先获取 icon 框 100% 100% 位置的点，和 sprite 图 100% 100% 位置的点，然后将其重合；

效果如下：

移动端使用 rem 单位时 css sprites 定位问题的解决 移动端使用 rem 单位时 css sprites 定位问题的解决

由此可知：其百分比定位的效果相当于先将 icon 框左上角的位置定位到 sprite 图 100% 100% 的位置，再往左上方回挪 icon 框 100% 100% 的位置；

这是在我们知道百分比的情况下实现的效果，而拿到 sprite 图的时候，我们往往知道的信息如下：

  1. 每个 icon 的大小
  2. sprite 图的大小
  3. 每个 icon 在 sprite 图中的定位

这时候我们就需要通过已知的条件计算出定位的百分比，这就变成了一道数学题：

已知 icon 宽高都为 50，sprite 宽高都为 200，icon 左上角在 sprite 内的坐标为 （50， 60），计算其 background-position ；

解：因为 background-position 定位的概念为 icon 框和 sprite 图各自指定位置重合；

设：sprite 宽为 W，高为 H，icon 宽为 w，高为 h，icon 在 sprite 中的坐标为 (x,y)，得到百分坐标为 (m,n) 故可得到以下公式：

mW-mw=x => m(W-w)=x => m=x/(W-w)*100%

nH-nh=y => n(H-h)=y => n=y/(H-h)*100%

计算可得：

m=50/(200-50)*100%=33.3%

n=60/(200-50)*100%=40%

当然，公式是上面那样，如果写到 css 中，就需要配合 css 的计算方法 calc() 进行计算，如果对 calc 不明确的同学自行百度一下；如果同学使用 scss 或者 less 等 css 预编译器编写样式的就更简单了，直接写一个混入方法就搞定；

3、其他方式

每个小图标使用单张图片，再通过 background-size: cover|100%|contain; 也能完美的显示，但是一个页面的图标多的时候，请求就太多了，浏览器的并发请求数是有限制的，这样会导致网页的加载时间大大加长，不划算；

每个小图标转成 base64 图片，再直接写入代码：

优点：1. 完整显示图标；2. 减少请求数量；
缺点：1. 色彩丰富的图片转成 base64 效果不好；2. 会增大图片提及，相当于用下载时间换取请求时间；

好了，这篇分享就说到这里，初次写文章，语句和方式难免有瑕疵，望各位看客老爷见谅。也希望大家多多支持。

标签：
移动端,rem,,css,sprites,定位
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网