制作HTML/CSS响应

-2

由于我创造了这个人在社会上的技能： http://codepen.io/anon/pen/NbdoKV HTML：制作HTML/CSS响应

.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种方式这个响应：

更改HTML/CSS - 我曾尝试和失败
这个HTML/CSS转换到SVG - 不知道从哪里开始

你会如何使这种响应？

来源

2016-11-20 Ryan

所以，你想让你的董事会填补整个网站？像一个框架？而且它应该在屏幕上自动调整？ – theoretisch

是的。如果它是一个图像，我会将宽度设置为100％，而不是设置高度，图像会缩放并保持宽高比。如果我不在此HTML上设置高度，剪贴板不会显示。 – Ryan

这是svg的一个例子。有几个网站可以绘制svgs。然后你有路径。我认为不同的属性是自我解释。如果您有任何问题，请询问。如果你想使用它，我认为最好的是阅读更多。也许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)"/>

现在你只需要调整高度，并与在变换属性分别增加了规模。

来源

2016-11-20 14:16:07 theoretisch

谢谢你。我没有使用你的svg，但我设法找到了其中一个网站，我创建了一个新的svg。 – Ryan

我的svg只是一个例子。很好，你管理它插入你自己的！ – theoretisch

制作HTML/CSS响应

回答

相关问题