web-dev-qa-db-ja.com

レスポンシブCSSサークル

ゴール：

レスポンシブCSSサークル：

  1. 等しい半径でスケーリングします。
  2. 半径はパーセントで計算できます。
  3. 半径はメディアクエリによって制御できます。

ソリューションが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%;}
}

これは私が今まで持っているものです：

http://jsfiddle.net/QmPhb/

<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

htmlcssresponsive-designcss-shapes
24
Dan Kanze

解決：

http://jsfiddle.net/WTWrB/

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

Responsive CSS Circles

5
Dan Kanze

必要ありません@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;
}​

フィドル

フルスクリーン

14
Praveen Kumar Purushothaman

短いコード

このソリューションは、コードサイズを縮小しますが、機能はそのまま維持します。元の.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は、この編集の時点では、それが必要な機能のタイプであるかどうかを知るために返信していません）。

7
ScottS

この解決策はここで提案されたものとはかなり異なることを知っていますが、それでもそれを置く価値があると思いました。

画像をマスクとして使用して円を作成し、パディングがパーセンテージとして指定されている場合、高さではなく親要素の幅に基づいて計算されるという事実を利用しました。これにより、完璧な正方形を作成することができました。

比例的にサイズ変更する円のデモンストレーション 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

0
Bruno