レスポンシブCSSサークル:
ソリューションがjavascriptの場合でも、メディアクエリトリガーをエミュレートする必要があります。メディアクエリを「必要としない」が、特定の幅でパーセンテージで半径を制御する機能が欲しい:
@media (max-width : 320px)
{
.x2{padding: 50%;}
}
@media (min-width : 321px) and (max-width : 800px)
{
.x2{padding: 25%;}
}
@media (min-width: 801px)
{
.x2{padding: 12.5%;}
}
これは私が今まで持っているものです:
<div class="x1">
<div class="x2">
lol dude
</div>
<div class="x2"></div>
<div class="x2"></div>
<div class="x2"></div>
</div>
.x1
{
float:left;
width:100%;
}
.x2
{
display:block;
float:left;
padding: 12.5%; //Currently being used to control radius.
width:auto;
height:auto;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
text-align:center;
}
このソリューションでは、コンテンツがサークルに追加された場合:
私はこれのための実用的なソリューションをここに構築しました: Responsive CSS Circles
DIV構造:
overflow:hidden
の.x2
を使用して、子要素の.x3
の背景色をこぼします。
.x3
の内部でコンテンツが開始することに注意してください
<div class="x0">
<div class="x1">
<div class="x2">
<div class="x3">
<!-- BEG Content -->
<div class="x4">
dude
</div>
<div class="x6">
<div class="x7">
dude
</div>
<div class="x8">
dude
</div>
</div>
<div class="x5">
dude
</div>
<!-- END Content -->
</div>
</div>
<div class="x2"></div>
<div class="x2"></div>
<div class="x2"></div>
</div>
</div>
CSS:
@media (max-width: 320px)
{
.x2 {padding: 50%;}
}
@media (min-width: 321px) and (max-width: 800px)
{
.x2 {padding: 25%;}
}
@media (min-width: 801px)
{
.x1 {width:800px}
.x2 {padding: 12.5%;}
}
.x0 {
float:left;
width:100%;
}
.x1 {
margin:0px auto;
}
.x2 {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
}
.x3 {
position: absolute;
width: 100%;
left: 0;
top:0;
font-size: 100%;
float:left;
height:100%;
background-color:red;
}
/* BEG Content */
.x3 div{float:left;}
.x4,.x5,.x6 {
width:100%;
}
.x7,.x8 {
width:50%;
float:left;
height:100%;
}
.x4,.x5,.x7,.x8 {
text-align:center;
}
.x4 {
background-color:blue;
height:20%;
}
.x5 {
background-color:yellow;
height:20%;
}
.x6 {
height:60%;
}
.x7 {
background-color:green;
}
.x8 {
background-color:orange;
}
/* END Content */
必要ありません@media
これに対するクエリ。これは私の試み、純粋なCSSです。
.x1 {
overflow:hidden;
}
.x1 .x2 {
display:block;
float:left;
padding: 12.5%;
width:auto;
height:auto;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
text-align:center;
position: relative;
}
.x1 .x2 span {
position: absolute;
width: 100%;
left: 0;
top: 48%;
line-height: 1em;
height: 1em;
font-size: 100%;
overflow: hidden;
}
このソリューションは、コードサイズを縮小しますが、機能はそのまま維持します。元の.x#
を保持し、不要になった.x0
、.x3
、.x6
を削除しました。したがって、最終的なソリューションでは、おそらく番号を付け直します(ただし、何が削除されたかを確認してもらいたいと思います)。
別のtop
またはleft
設定を必要とする円を「分割」するピースは、オーバーライドするために.x2 > div
セレクターを満たすか超えるセレクターが必要です。一部のセレクターには.x2 > .x7
などがあります。
(以下のコメントに記載されているように、 Chromeにはバグの問題があります OPがバウンティの開始時に投稿した元のテクニックを使用します。これはそれらを解決しません。別のブラウザーで以下を参照してください。)
[〜#〜] html [〜#〜]
<div class="x1">
<div class="x2">
<!-- BEG Content -->
<div class="x4">
dude
</div>
<div class="x7">
dude
</div>
<div class="x8">
dude
</div>
<div class="x5">
dude
</div>
<!-- END Content -->
</div>
<div class="x2"></div>
<div class="x2"></div>
<div class="x2"></div>
</div>
[〜#〜] css [〜#〜]
.x1 {
margin:0px auto;
}
.x2 {
overflow:hidden;
display:block;
float:left;
width:auto;
height:auto;
position: relative;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
}
/* BEG Content */
.x2 > div {
position: absolute;
text-align: center;
top: 0;
left: 0;
}
.x4,.x5 {
width:100%;
height: 20%;
}
.x2 > .x7, .x2 > .x8 {
width:50%;
height: 60%;
top: 20%;
}
.x4 {
background-color:blue;
}
.x2 > .x5 {
background-color:yellow;
top: 80%;
}
.x7 {
background-color:green;
}
.x2 > .x8 {
background-color:orange;
left: 50%;
}
/* END Content */
@media (max-width: 320px)
{
.x2 {padding: 50%;}
}
@media (min-width: 321px) and (max-width: 800px)
{
.x2 {padding: 25%;}
}
@media (min-width: 801px)
{
.x1 {width:800px}
.x2 {padding: 12.5%;}
}
EDIT:コメントに基づいて、OPはこのフィドルが提供するコントロール)のようなものを望んでいるようです(Chromeでは機能しません。OPは、この編集の時点では、それが必要な機能のタイプであるかどうかを知るために返信していません)。
この解決策はここで提案されたものとはかなり異なることを知っていますが、それでもそれを置く価値があると思いました。
画像をマスクとして使用して円を作成し、パディングがパーセンテージとして指定されている場合、高さではなく親要素の幅に基づいて計算されるという事実を利用しました。これにより、完璧な正方形を作成することができました。
比例的にサイズ変更する円のデモンストレーション here
HTMLコード
<div class="container">
<img class="circle" src="circleImage.png">
</div>
CSSコード
.container {
position: relative;
float: left;
width: 50%;
height: 0;
padding-bottom: 50%;
background-color: #bbb;
}
.circle {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: auto;
z-index: 1;
}
@media (max-width: 320px) {
.container { width: 100%; padding-bottom: 100%; }
}
@media (min-width: 321px) and (max-width: 800px) {
.container { width: 50%; padding-bottom: 50%; }
}
@media (min-width: 801px) {
.container { width: 25%; padding-bottom: 25%; }
}
上記のサークルのデモは、質問ごとにセクションに分割されています here