如何使 css “繪制”響應
[英]How to make an css “draws” responsive
問題描述
我通過 html 和 css 創建了一個“水族館”，
我想將所有當前頁面變為響應式，這將使“繪圖”根據瀏覽器分辨率縮小和增長。
首先，容器應該是什么樣子？
是否可以在主經線中擁有像PX這樣的值（例如：.Fish 或.JellyFish）？
body{ width:100%; margin:100px auto; } div#container{ width:100%; text-align:center; } div.Fish{ position:absolute; width:200px; height:120px; float:left; } div.Fish div.fishBody{ width:150px; height:70px; border-radius:50%; border:solid 1px silver; background-color:silver; margin: 0 0 0 25px; } div.Fish div.fishBody div.fishEye { float:right; margin:25px; width:15px; height:15px; border-radius:50%; background-color:#000000; } div.Fish div.fishBody div.fishEye div.fishEyePupil { float:right; width:5px; height:5px; margin:5px 2px 0 0; border-radius:50%; background-color:#fff; } div.Fish div.fishMouth{ float:right; position:relative; width: 0; height: 0; margin:40px 20px 0 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #fff; } div.Fish div.topFin { position:relative; width: 0; height: 0; margin:-10px 0 0 70px; top:10px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid silver; } div.Fish div.bottomFin { position:relative; width: 0; height: 0; margin:0 0 0 70px; bottom:10px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid silver; } div.Fish div.backFin { float:left; position:relative; width: 0; height: 0; margin:35px 0 0 0px; bottom:10px; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid silver; }.fish1{ left:800px; top: 300px; animation: myFishmove1 5s infinite; animation-direction: alternate; }.fish2{ left:1200px; top: 600px; animation: myFishmove2 5s infinite; animation-direction: alternate; }.fish3{ left:1600px; top: 200px; animation: myFishmove3 5s infinite; animation-direction: alternate; }.fish4{ left:400px; top: 500px; animation: myFishmove4 5s infinite; animation-direction: alternate; } @keyframes myFishmove1 { from {left: 800px;,top:300px;} to {left:200px;top: 500px;} } @keyframes myFishmove2 { from {left: 1200px;,top:600px;} to {left:400px;top: 900px;} } @keyframes myFishmove3 { from {left: 1600px;,top:200px;} to {left:2000px;top: 600px;} } @keyframes myFishmove4 { from {left: 400px;,top:500px;} to {left:1200px;top: 100px;} } div.JellyFish{ position:absolute; width:250px; height:600px; float:left; } div.JellyFish div.jellyHead{ width:200px; height:100px; background-color:lightblue; border-top-left-radius: 100px; border-top-right-radius: 100px; } div.JellyFish div.legType1 { float:left; width: 40px; height: 170px; border-right: solid 8px lightblue; border-radius: 0 0 50%/100px 100px; } div.JellyFish div.legType2 { margin: 0 0 0 15px; float:left; width: 40px; height: 230px; border-right: solid 8px lightblue; border-radius: 0 0 50%/100px 100px; } div.JellyFish div.legType3 { margin: 0 0 0 50px; float:left; width: 50px; height: 120px; border-left: solid 8px lightblue; border-radius: 0 0 0 50%/100px; } @keyframes myJellymove1 { from {top: 180px;} to {top: 400px;} } @keyframes myJellymove2 { from {top: 300px;} to {top: 600px;} } @keyframes myJellymove3 { from {top: 100px;} to {top: 700px;} } @keyframes myJellymove4 { from {top: 400px;} to {top: 800px;} } @keyframes myJellymove5 { from {top: 600px;} to {top: 200px;} }.jelly1{ left:500px; top:180px; animation: myJellymove1 5s infinite; animation-direction: alternate; }.jelly2{ left:800px; top:300px; animation: myJellymove2 5s infinite; animation-direction: alternate; }.jelly3{ left:1100px; top:100px; animation: myJellymove3 5s infinite; animation-direction: alternate; }.jelly4{ left:1400px; top:400px; animation: myJellymove4 5s infinite; animation-direction: alternate; }.jelly5{ left:1800px; top:600px; animation: myJellymove5 5s infinite; animation-direction: alternate; }
<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <div id="container"> <div class="Fish fish1"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="Fish fish2"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="Fish fish3"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="Fish fish4"> <div class="backFin"></div> <div class="fishMouth"></div> <div class="topFin"></div> <div class="fishBody"> <div class="fishEye"> <div class="fishEyePupil"></div> </div> </div> <div class="bottomFin"></div> </div> <div class="JellyFish jelly1"> <div class="jellyHead"></div> <div class="legType1"></div> <div class="legType2"></div> <div class="legType3"></div> </div> <div class="JellyFish jelly2"> <div class="jellyHead"></div> <div class="legType2" style="margin: 0;"></div> <div class="legType1"></div> <div class="legType3"></div> </div> <div class="JellyFish jelly3"> <div class="jellyHead"></div> <div class="legType2" style="margin: 0 50px 0 0;"></div> <div class="legType3" style="margin: 0 0 0 0;"></div> <div class="legType1" style="border-radius: 0 50%/100px 100px 0;border-right:none;border-left:solid 8px lightblue;"></div> </div> <div class="JellyFish jelly4"> <div class="jellyHead"></div> <div class="legType1"></div> <div class="legType2"></div> <div class="legType3"></div> </div> <div class="JellyFish jelly5"> <div class="jellyHead"></div> <div class="legType2" style="margin: 0;"></div> <div class="legType1"></div> <div class="legType3"></div> </div> </div> </body> </html>
這樣做的最佳選擇是什么？
謝謝！
1 個解決方案
解決方案1
0 2020-07-05 21:12:49
如我所見，您已使用px單位在關鍵幀中移動對象。 您應該使用基於%的單位來移動對象。 要使當前頁面在所有視口中工作，只需添加：
body{
overflow:none;
}
將 overflow: none 屬性添加到您的 body 標簽以從頁面中刪除水平和垂直滾動條，但您的一些魚將根據視口的大小被裁剪掉。
希望我有所幫助
如何使CSS響應高度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.