Heim >Web-Frontend >HTML-Tutorial >完美解决移动端使用 rem 单位时 CSS Sprites 错位问题_html/css_WEB-ITnose

完美解决移动端使用 rem 单位时 CSS Sprites 错位问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:24:221372Durchsuche

移动端网页开发离不开强大的 rem 支持,但由于各尺寸基数未必成比例,以及浏览器的计算偏差,常常会导致 background-position 不够精确,引发 CSS Sprites 错位。下图左侧为 PC 端模拟页面,右侧为移动端实测:

明显可以看出右侧的图标已经错位,图中的问题可以依赖 iconfont 解决,但只局限于单色图标。既要响应式,又得避免 rem 带来的问题,选用百分比是个好方案。

可是……等等,怎么还是错位?甚至完全没办法定位到需要的位置?原来 backgroud-positon 为百分比单位时,其计算方式非常特殊,这里引用 林小志 在 《闲扯 background-position 的单位属性值》 中的一段话:

似乎大概意思是:如果是 14% 84% 的这个值,那么就以图片的 14% 84% 的坐标点,放置在容器的 14% 84% 的位置。那这样理解的话,就是说明,如果是用百分比来作为 background-position 的属性值的话,那么背景图片相对于容器的中心点是随时都在改变的。

于是问题迎刃而解,我们可以整理出以下公式:

n%*W - n%*w = -xn%*H - n%*h = -y

其中 W/H 是整个雪碧图的宽高, w/h 是单个 icon 的大小,而 x/y 则是传统的 px 坐标。基于 gulp.spritesmith + Sass,使用以下模板:

{{#extend "scss"}}{{#content "sprites"}}{{#each sprites}}@mixin {{prefix}}-{{name}} {    background-position: 0 {{offset_y}}/({{height}}-{{total_height}})*100%;}{{/each}}{{/content}}{{#content "spritesheet"}}.{{spritesheet.name}} {    background-image: url('{{{spritesheet.escaped_image}}}');    background-repeat: no-repeat;    background-size: px({{spritesheet.width}}) px({{spritesheet.height}});}{{/content}}{{/extend}}

其中的 px(*) 是一个将 px 转换为 rem 的函数, {{prefix}} 等变量可以在gulpfile.js 中配置。之所以用 @mixin ,是由于 CSS3 动画中可以使用 @include 但不能使用 @extend 。同时也兼顾了元素与伪元素混合使用的情况,避免产生多余的样式。

怎么样?完美解决了吧 :)

(完)

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn