响应式字体图标是可能的吗？

Question

我试图用字体图标替换no-img图像，使其与大小img无关。 以下是示例：http://codepen.io/piernik/pen/huHCg

现在将屏幕缩小到500px以下。如何使其响应？ 使用img标记，您只需要img width:100%即可。如何使用字体图标和i标记？

我知道我可以使用CSS中的@media元素，但这不是很好的解决方案 - 我不想逐步更改字体大小（最大700px，最大400px等）。我希望它能缩水。

Answer 1

您可以使用仅限CSS 来实现相机形状，并使用百分比高度/宽度使其响应：

<强> DEMO

输出：

HTML：

<div class="camera"><div class="circle"></div></div>

CSS：

.camera{
  position:relative;
  width:70%;
  margin:20% auto;
  background-color:#444444;
  padding-bottom:50%;
  border-radius:15%;
}
.camera:before, .camera:after{
  content:'';
  position:absolute;
  bottom:90%;
  background-color:inherit;
  height:25%; width:25%;
  border-radius:25%;
}
.camera:before{
  right:45%;
  -webkit-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg);
}
.camera:after{
  left:45%;
  -webkit-transform: skewX(15deg);
  -ms-transform: skewX(15deg);
  transform: skewX(15deg);
}
.circle{
  position:absolute;
  left:30%; top:20%;
  width:40%;
  padding-bottom:40%;
  background:#EEEEEE;
  border-radius:50%;
}
.circle:after{
  content:'';
  position:absolute;
  top:15%; left:15%;
  width:70%; height:70%;
  background-color:#444444;
  border-radius:50%;
}

Answer 2

您可以根据窗口大小动态缩放字体大小。看看这个page。