在網頁中創建響應式圈子

我想創建一個由9個圈子組成的響應式頁面。在下面的代碼中，每當更改瀏覽器大小（不響應）時，都會更改它們的位置。我嘗試使用CSS @media查詢，但無法創建響應式。在網頁中創建響應式圈子

我應該使用位置寬度的百分比，高度而不是固定的100px？

<html> 
<head> 
<style> 
.circle1{ 
    width:100px; 
    height:100px; 
    margin-left:600px; 
    background-color:black; 
    border-radius:100px; 
} 
.circle2{ 
    margin-left:600px; 
    margin-top:30%; 
    width: 100px; 
    height:100px; 
    background-color:darkred; 
    border-radius:100px; 
} 
.circle3{ 
    margin-left:250px; 
    margin-top:-27%; 
    width: 100px; 
    height:100px; 
    background-color:gold; 
    border-radius:100px; 
} 
.circle4{ 
    margin-top:-20%; 
    margin-left:350px; 
    width:100px; 
    height:100px; 
    background-color:greenyellow; 
    border-radius:100px; 
} 
.circle5{ 
    margin-left:63%; 
    margin-top:-8%; 
    width: 100px; 
    height:100px; 
    background-color:blueviolet; 
    border-radius:100px; 
} 
.circle6{ 
    margin-left:900px; 
    margin-top:5%; 
    width: 100px; 
    height:100px; 
    background-color:deeppink; 
    border-radius:100px; 
*emphasized text* 
} 
.circle7{ 
    margin-left:350px; 
    margin-top:7%; 
    width: 100px; 
    height:100px; 
    background-color:blue; 
    border-radius:100px; 
} 
.circle8{ 
    margin-left:800px; 
    margin-top:-10%; 
    width : 100px; 
    height:100px; 
    background-color:aqua; 
    border-radius:100px; 
} 
.circle9{ 
    margin-left:600px; 
    margin-top:-20%; 
    width: 100px; 
    height:100px; 
    background-color:darkorange; 
    border-radius:100px; 
} 
</style> 
</head> 
<body> 
    <div class="circle1"></div> 
    <div class="circle2"></div> 
    <div class="circle3"></div> 
    <div class="circle4"></div> 
    <div class="circle5"></div> 
    <div class="circle6"></div> 
    <div class="circle7"></div> 
    <div class="circle8"></div> 
    <div class="circle9"></div> 
</body> 
</html>

來源

2017-02-20 vineeth

該位置做你想做的9圈是我n桌面/平板電腦/手機？ –

我通過mozilla瀏覽器開發人員模式在筆記本電腦上水平更改屏幕大小。預期的結果是一箇中心圈，其餘8個圈。 – vineeth

[以中心內容爲響應圈]的可能重複（http://stackoverflow.com/questions/34788537/responsive-circle-with-centered-content） –

下面是代碼：

.full{ margin:0 auto; width:70%;} 
 
.circle1{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin:0 42%; 
 
    background-color: black; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
} 
 
.circle2{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 20%; 
 
    background-color:darkred; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
\t margin-top:20px; 
 
} 
 
.circle3{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 26%; 
 
    background-color:gold; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
\t margin-top:20px; 
 
\t margin-right: 15%; 
 
} 
 
.circle4{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 0%; 
 
    background-color:greenyellow; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
\t margin-top:20px; 
 
} 
 
.circle5{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 26%; 
 
    background-color:blueviolet; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
\t margin-top:20px; 
 
} 
 
.circle6{ 
 
     width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 26%; 
 
    background-color:deeppink; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
\t margin-top:20px; 
 
} 
 
.circle7{ 
 
     width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 20%; 
 
    background-color:blue; 
 
    border-radius: 50%; 
 
\t display:inline-block; 
 
\t margin-top:20px; 
 
} 
 
.circle8{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin-left: 26%; 
 
    background-color:aqua; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    margin-top: 20px; 
 
} 
 
.circle9{ 
 
    width: 15%; 
 
    padding-top: 15%; 
 
    margin: 0 42%; 
 
    background-color:darkorange; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
} 
 
@media only screen and (max-width: 980px) { 
 
\t .full{width:100%;} 
 
}

<div class="full"> 
 
\t <div class="circle1"></div> 
 
    <div class="circle2"></div> 
 
    <div class="circle3"></div> 
 
    <div class="circle4"></div> 
 
    <div class="circle5"></div> 
 
    <div class="circle6"></div> 
 
    <div class="circle7"></div> 
 
    <div class="circle8"></div> 
 
    <div class="circle9"></div> 
 
</div>

來源

2017-02-20 10:28:13 Piyali

獲得響應式圈子的最佳方式是使用百分比尺寸。
如果需要，您還可以使用視口（vh，vw）。

當添加百分比的填充是基於寬度時，將寬度設置爲33％並將填充頂部（或底部）設置爲相同的值將使水平和垂直大小相同。

jsFiddle link

.container { 
 
    width: 50vw; 
 
    margin: auto; 
 
} 
 

 
.container > div { 
 
    border-radius: 50%; 
 
    float: left; 
 
    width: 33.333%; 
 
    padding-top: 33.333%; 
 
} 
 

 
.circle1 {background-color: black;} 
 
.circle2 {background-color: darkred;} 
 
.circle3 {background-color: gold;} 
 
.circle4 {background-color: greenyellow;} 
 
.circle5 {background-color: blueviolet;} 
 
.circle6 {background-color: deeppink;} 
 
.circle7 {background-color: blue;} 
 
.circle8 {background-color: aqua;} 
 
.circle9 {background-color: darkorange;}

<div class="container"> 
 
    <div class="circle1"></div> 
 
    <div class="circle2"></div> 
 
    <div class="circle3"></div> 
 
    <div class="circle4"></div> 
 
    <div class="circle5"></div> 
 
    <div class="circle6"></div> 
 
    <div class="circle7"></div> 
 
    <div class="circle8"></div> 
 
    <div class="circle9"></div> 
 
</div>

來源

2017-02-20 02:23:19 pol

在網頁中創建響應式圈子

回答

相關問題