挪动端应用 rem 企业时 css sprites 精准定位难题的

2021-03-17 15:50 jianzhan

如今开发设计挪动端 wap 网页页面,坚信大伙儿都会应用强劲的 rem 企业去兼容各种各样机型和显示屏;以便降低互联网恳求数量,提升网页页面浏览特性,1般都会把好几个小 icon 合拼成1张 sprite 图,随后依据 background-position 开展精准定位;可是因为测算机的测算误差,经常会致使 icon 的显示信息有1到2像素的误差;

1、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: ⑶5px 0px;  width: 32px; height: 32px; }
.icon-emailmsg { background-position: 0px ⑶2px; width: 32px; height: 32px; }
.icon-import { background-position: ⑶2px ⑶2px; width: 32px; height: 32px; }
.icon-music { background-position: ⑹7px 0px; width: 32px; height: 32px; }
.icon-pay { background-position: 0px 0px; width: 35px; height: 32px; }
.icon-search { background-position: ⑹7px ⑶2px; width: 32px; height: 32px; }
.icon-speak { background-position: 0px ⑹4px; width: 32px; height: 32px; }
.icon-task { background-position: ⑶2px ⑹4px; width: 32px; height: 32px; }

实际效果

由于其应用 px 精准定位,且显示屏企业和倍率全是固定不动的,因此能够完善的完成雪碧图实际效果;

2、挪动端

在挪动端,因为各种各样机型的显示屏倍率,使得应用 px 做为企业的合理布局会有很大的兼容难题,因此如今流行的兼容计划方案便是应用 rem 作企业,而且依据显示屏倍率测算 rem 的基值开展兼容;

自己是以宽为 750 的设计方案稿为基本,每 1rem 的值为设计方案稿中 100px 的长度; 因为 icon 的尺寸规格基础1致,故略微做了点解决,裁剪掉了 icon 的全透明一部分,生成规格不统1的 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; }

实际效果:

仔细注意能够看出,一部分地区显示信息会有大约 1px 的误差,这是因为不一样手机上测算误差致使的,假如 icon 较为简易,能够接纳这类实际效果也没事儿,假如对 icon 显示信息的规定较高,则这类方法很显著不可以做到规定;

2、变换为 rem 后根据 百分比开展精准定位

最先确定 background-position 应用百分比精准定位的定义:

特性值为百分比时,将以特定的点为重叠点放置雪碧图和显示信息 icon 的框。 简而言之,假定值为 10% 20%,则是将 sprite 图的 10% 20% 部位的点与显示信息框 10% 20% 的点重叠(其实不是 0% 0% 的点)

举个栗子:有1张 200X200 的 sprite 图,和1个 50X50 的 icon 显示信息框,这时候假如设定 background-position: 0% 0%;

实际效果以下:

假如设定 background-position: 100% 100%; ,会先获得 icon 框 100% 100% 部位的点,和 sprite 图 100% 100% 部位的点,随后将其重叠;

实际效果以下:

由此可知:其百分比精准定位的实际效果非常于先将 icon 框左上角的部位精准定位到 sprite 图 100% 100% 的部位,再往左上方回挪 icon 框 100% 100% 的部位;

这是在大家了解百分比的状况下完成的实际效果,而拿到 sprite 图的情况下,大家常常了解的信息内容以下:

  1. 每一个 icon 的尺寸
  2. sprite 图的尺寸
  3. 每一个 icon 在 sprite 图中的精准定位

这时候候大家就必须根据已知的标准测算出精准定位的百分比,这就变为了1道数学课题:

已知 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⑸0)*100%=33.3%

n=60/(200⑸0)*100%=40%

自然,公式是上面那样,假如写到 css 中,就必须相互配合 css 的测算方式 calc() 开展测算,假如对 calc 不确立的同学自主百度搜索1下;假如同学应用 scss 或 less 等 css 预编译程序器撰写款式的就更简易了,立即写1个混入方式就搞定;

3、别的方法

每一个小标志应用单张照片,再根据 background-size: cover|100%|contain; 也能完善的显示信息,可是1个网页页面的标志多的情况下,恳求就太多了,访问器的高并发恳求数是比较有限制的,这样会致使网页页面的载入時间大大加长,不划得来;

每一个小标志转成 base64 照片,再立即写入编码:

优势:1. 详细显示信息标志;2. 降低恳求数量;
缺陷:1. 颜色丰富多彩的照片转成 base64 实际效果不太好;2. 会增大照片提及,非常于用免费下载時间换取恳求時间;

好了,这篇共享就说到这里,第一次写文章内容,句子和方法免不了有缺陷,望各位看客老爷见谅。也期待大伙儿多多适用脚本制作之家。