如何在响应式设计中使用 CSS 精灵

Question

我希望有一位 CSS 专家可以帮助解决这个问题... 我正在为一个站点构建响应式布局，其中包括顶部的水平导航栏。这个栏包含 5 个按钮，每个按钮的宽度都相同（尽管显然这个宽度需要灵活）。当在具有小视口宽度的设备上查看菜单时，我想为按钮使用图标而不是文本。一旦我觉得视口宽度达到合适的大小，我将使用媒体查询来调整布局以使用文本。这很重要，因为我预计不需要更改图标本身的大小。我很高兴它们具有固定大小，以按钮为中心，如果按钮大小本身发生变化，那么中心图标周围只会有更多“填充”。 通常我会使用将所有图标放在一张图像中并使用精灵技术仅显示图像的正确部分，但我遇到了一个问题。如果我希望锚元素填充父列表元素，那么如何使精灵居中？

以下是一些示例标记： 首先是html（sn-p）

 <nav>
   <ul class="top_nav">
    <li><a class="link_1" href="#">link 1</a></li>
    <li><a class="link_2" href="#">link 2</a></li>
    <li><a class="link_3" href="#">link 3</a></li>
    <li><a class="link_4" href="#">link 4</a></li>
    <li><a class="link_5" href="#">link 5</a></li>
   </ul>
 </nav>

我可能会这样设计：

 nav ul {
          width: 100%;
          overflow: auto;
        }

 nav li {
          float: left;
          width: 20%;
          background: #2c2c2c; /* dark background for light icons */
        }

 nav li a {
            display: block;
            border: 1px solid #e7e7e7;
            background-image: url(path/to/sprite.png);
            background-repeat: no-repeat;
            text-indent: -15000px;
            width: 48px;
            height: 48px;
            margin: 0 auto;
          }

 nav li a.link_1 {
                   background-position: 0 0;
                 }

 nav li a.link_2 {
                   background-position: 0 -49px;
                 }

等等……

但这只会在一个按钮内给我一个 48px x 48px 的可点击区域，该区域可以根据父元素的大小改变它的宽度。如果我让锚元素填充它的父列表元素，那么图标不能使用边距规则居中。 我可以在锚元素中添加另一个元素，该元素是空的，但背景是这样的图标：

 <li><a href="#"><div class="link_1">Link 1</div></a></li>

并设置样式：

 nav li a {
            display: block;
            border: 1px solid #e7e7e7;
            width: 100%;
          }

 nav li a div {
                background-image: url(path/to/sprite.png);
                background-repeat: no-repeat;
                text-indent: -15000px;
                width: 48px;
                height: 48px;
                margin: 0 auto;
              }

 nav li a div.link_1 {
                   background-position: 0 0;
                 }

但这不是一个非常语义化或优雅的解决方案。谁能想到更好的办法？？

Answer 1

你可以使用：

• 生成内容 (:before/:after) 代替真实元素以保持代码整洁；
• background-size 属性来缩放你的背景图片；
• Data URIs 而不是精灵。当前所有浏览器都支持数据 URI（IE8 对表示为数据 URI 的每个文件的最大大小限制为 32KB）。

Answer 2

我创建了一个responsive CSS sprite generator。

它在数据 URI 中使用透明 PNG 来保持纵横比，背景位置百分比以显示正确的图像，背景大小：100% 以缩放它。

与其他一些技术不同，这将适用于单个精灵中不同大小和纵横比的图像。

Answer 3

我实际上有一个解决方案，它具有很好的跨浏览器支持，代码干净整洁，并且在我的博客上使用 sprite 作为带有一点 css 标记的背景图像有很好的记录：http://pagecrafter.com/responsive-background-image-sprites-css-tutorial/

本质上，它依靠巧妙的技巧来保持元素的纵横比，同时允许背景图像保持所述元素的完整大小。那么所需要做的就是以百分比指定背景精灵的位置！这种方法也很有效，因为一旦你准备好 css，你只需将一个类应用到你的元素上就可以了。