Question

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

以下是一些示例标记：首先是html（片段）

 <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，你只需要在你的元素中应用一个类，你就可以了。

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

3 个答案: