Heim >Web-Frontend >HTML-Tutorial >完美解决移动端使用 rem 单位时 CSS Sprites 错位问题_html/css_WEB-ITnose
移动端网页开发离不开强大的 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 。同时也兼顾了元素与伪元素混合使用的情况,避免产生多余的样式。
怎么样?完美解决了吧 :)
(完)