Question

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

Answer 1

获得响应式圈子的最佳方式是使用百分比尺寸如果需要，您还可以使用视口（vh，vw）。

当添加填充百分比时，它基于宽度，将宽度设置为33％，填充顶部（或底部）为相同值将使水平和垂直尺寸相同。

jsFiddle link

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 2

以下是代码：

.full{ margin:0 auto; width:70%;}
 .circle1{
    width: 15%;
    padding-top: 15%;
    margin:0 42%;
    background-color: black;
    border-radius: 50%;
	display:inline-block;
 }
 .circle2{
    width: 15%;
    padding-top: 15%;
    margin-left: 20%;
    background-color:darkred;
    border-radius: 50%;
	display:inline-block;
	margin-top:20px;
 }
 .circle3{
     width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:gold;
     border-radius: 50%;
	 display:inline-block;
	 margin-top:20px;
	 margin-right: 15%;
 }
 .circle4{
     width: 15%;
    padding-top: 15%;
    margin-left: 0%;
     background-color:greenyellow;
     border-radius: 50%;
	 display:inline-block;
	 margin-top:20px;
 }
 .circle5{
     width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:blueviolet;
     border-radius: 50%;
	 display:inline-block;
	 margin-top:20px;
 }
 .circle6{
      width: 15%;
    padding-top: 15%;
    margin-left: 26%;
     background-color:deeppink;
     border-radius: 50%;
	 display:inline-block;
	 margin-top:20px;
 }
 .circle7{
       width: 15%;
    padding-top: 15%;
    margin-left: 20%;
     background-color:blue;
    border-radius: 50%;
	 display:inline-block;
	 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) {
	 .full{width:100%;}
 }

<div class="full">
	<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>

在网页中创建自适应圈子

2 个答案: