html - 响应式字体图标可能吗？

Question

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

现在将屏幕缩小到 500 像素以下。如何让它响应？使用 img 标签，您只需提供 img width:100%。怎么用字体图标和i标签呢？

我知道我可以使用 CSS 中的 @media 元素，但这不是好的解决方案 - 我不想逐步更改字体大小(最大 700 像素、最大 400 像素等)。我想让它收缩液体。

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%;
}