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

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

php中文网

发布： 2016-06-24 11:24:22

原创

1675人浏览过

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

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

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 。同时也兼顾了元素与伪元素混合使用的情况，避免产生多余的样式。

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

（完）