【发布时间】：2020-07-06 05:15:31
【问题描述】：
我已经通过 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>这样做的最佳选择是什么？
谢谢！
【问题讨论】：
-
请在工作的 sn-p 中包含您尝试实现此目的的代码
-
我已经添加了 sn-p。
标签： html css responsive-design responsive