html - 如何使通过 "class"响应包含的背景图像

Question

我有以下代码笔 - http://codepen.io/anon/pen/PPLeRV?editors=110

我从 icomoon 创建了一个 SVG Sprite 并将其用作背景图像类。我需要知道如何让它响应。

html

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

CSS

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(http://imgh.us/sprite_4.svg);
}
.icon-home {
    width: 96px;
    height: 96px;
    background-position: 0 0;
}
.icon-play {
    width: 96px;
    height: 96px;
    background-position: -112px 0;
}
.icon-clubs {
    width: 96px;
    height: 96px;
    background-position: -224px 0;
}
.icon-books {
    width: 108px;
    height: 96px;
    background-position: -336px 0;
}
.icon-folder-open {
    width: 96px;
    height: 96px;
    background-position: -560px 0;
}
.icon-location2 {
    width: 96px;
    height: 96px;
    background-position: -672px 0;
}

不幸的是，当我使用这些图像时，它不适用于不同的媒体类型。我可以使用媒体查询 - 但缩放功能效果不佳。

我正在使用此功能来减少 http 请求 - sprite 和所有，而不是单个图像 url。

我尝试将它们放入 flex 盒子和 div 等中，但它没有响应。

帮助:)

Answer 1

DEMO

使用相对单位的背景大小和高度，就像我使用 vw 一样

1vw = 1% of viewport width

当浏览器调整您的高度(在 vw 中)时，它会根据浏览器的宽度而变化。它支持主要浏览器:Firefox，Chrome，但我不知道 IE

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("http://imgh.us/sprite_4.svg");
  border: 1px solid grey;
  width: 100%;
  height: 20vw;
  max-width: 10%;
  background-size: 80vw 20vw;
}
.icon-home {
  background-position: left -1% bottom 0px;
}
.icon-books {
  background-position: left 43% bottom 0px;
}
.icon-folder-open {
  background-position: left 72% bottom 0px;
}
.icon-location2 {
  background-position: left 87% bottom 0px;
}

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>