在网页中创建响应式圈子

我想创建一个由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

在网页中创建响应式圈子

回答

相关问题