製作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響應

回答

相關問題