0
9つの円からなる反応性の高いページを作成したいと思います。以下のコードでは、ブラウザのサイズを変更するたびにサークルの位置が変更されます（応答しません）。私はCSSの@メディアのクエリを使用してみましたが、私は応答して作成できませんでした。ウェブページの反応円の作成
固定幅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>
nデスクトップ/タブレット/モバイル？ –
私はラップトップでmozillaブラウザの開発者モードで画面のサイズを横方向に変更しています。予想される結果は、中央に1円、その周りに8つの円が残ります。 – vineeth
[センタリングされたコンテンツのあるレスポンシブルサークル]（http://stackoverflow.com/questions/34788537/responsive-circle-with-centered-content）の可能な複製 –