网页制作

移动端使用 rem 单位时 css sprites 定位问题的解决
网页制作 2024/11/15 佚名
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
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com