使 HTML/CSS 响应式

Question

由于社区中其他人的技能，我创建了这个： http://codepen.io/anon/pen/NbdoKV HTML：

.clipboard:after, .clip, .clip:before, .paper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clipboard {
  position: relative;
  display: block;
  height: 27em;
  width: 23em;
  margin: 5em auto;
  border-radius: 3%;
  background: #b69b4c;
}
.clipboard:after {
  top: 2.25em;
  content: "";
  height: 1.5em;
  width: 20em;
  background: #fefefe;
}

.clip {
  z-index: 2;
  top: 4.2em;
  display: block;
  height: 10em;
  width: 17em;
  border-radius: 50%;
  background: #A7A7A7;
}
.clip:before {
  content: "";
  top: -.5em;
  height: 5.3em;
  width: 5.3em;
  border: 2.2em solid #A7A7A7;
  border-radius: 50%;
}

.paper {
  z-index: 2;
  display: block;
  height: 23em;
  width: 20em;
  margin-top: .5em;
  background: #fefefe;
}
.paper:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 3.25em;
  width: 3.25em;
}
.paper:after {
  content: "";
  position: absolute;
  height: 1.25em;
  width: 1.5em;
}

<i class="clipboard">
    <i class="clip"></i>
    <i class="paper"></i>
</i>

如您所见，此图形无法很好地缩放/响应。如果我将宽度设置为 100%，一切都会失去比例/透视。理想情况下，我希望能够将剪贴板宽度设置为 100%，然后所有内容（高度、顶部的剪辑、填充等）都将正确缩放 - 就像图像一样。

我可以看到 2 种方法来使这个响应：

1. 更改 HTML/CSS - 我尝试过但失败了
2. 将此 HTML/CSS 转换为 SVG - 不知道从哪里开始

你会如何让它响应？

Answer 1

这是一个 svg 的例子。有一些网站可以绘制 svg。 然后你就有了路径。 我认为不同的属性是自我解释的。如果您有任何问题，请提出。如果您想使用它，我认为最好的方法是阅读更多有关此内容的信息。 也许是here，但还有更多好的来源。

 <svg height="200" width="450">
 <path 
    id="lineAB" 
    fill="khaki"
    d="M9.778,96h108.445c5.400000000000006,0,9.778000000000006,-4.378,
       9.778000000000006,-9.778000000000006v-68.445c0,-5.4,-4.378,-9.778,
      -9.778000000000006,-9.778h-108.445c-5.4,0,-9.778,4.378,-9.778,
       9.778v68.445c0,5.400000000000006,4.378,9.778000000000006,
       9.778,9.778000000000006ZM8,16h112v72h-112v-72Z"
    transform="matrix(0.000503985 -1.04456 1.29502 0.000406514 -10.7973 124.73) 
    translate(-60,150)" />
 <path  
    fill="#C0C0C0" 
    d="M109.58289641986332,32.006086609509h8v-6.222000000000001c0,-5.3999999999999995,
      -4.378,-9.778,-9.778000000000006,-9.778h-30.221999999999994v-6.2219999999999995c0,
      -5.4,-4.378,-9.778,-9.778000000000006,-9.778h-20.445c-5.3999999999999995,0,
      -9.777999999999999,4.378,-9.777999999999999,9.778v6.222000000000001h-30.222c-5.3999999999999995,
       0,-9.778,4.378,-9.778,9.777999999999999v6.222000000000001h112ZM45.58289641986323,
       8.006086609509033h24v8h-24v-8Z" 
    transform="matrix(0.560377 0.00141111 -0.00141111 0.560377 25.8245 -9.95107)  
    translate(340,90)"/>

现在你只需要调整高度和 分别在transform属性处添加比例。