24

ゴール：

レスポンシブ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;
}

問題：

このソリューションでは、コンテンツがサークルに追加されると、次のようになります。

  • 利用可能なパディングを超えて拡大縮小すると、形状がゆがみます。
  • 半径のサイズを大きくします。

アップデート：

私はここでこれのための実用的なソリューションを構築しました： レスポンシブCSSサークル

4

4 に答える 4

14

@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;
}​

フィドル

全画面表示

于 2012-10-18T01:55:34.510 に答える
7

短いコード

このソリューションは、コードサイズを縮小しますが、機能を維持します。私はオリジナルを保持し、、、.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%;}
}

編集：コメントに基づいて、OPはこのフィドルが提供するコントロールのようなものを望んでいたようです（Chromeでは機能しません;この編集の時点でOPはそれが望ましい機能のタイプであるかどうかを知るために私に返信していません）。

于 2012-10-22T19:49:16.650 に答える
5

解決：

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

レスポンシブCSSサークル

于 2012-12-23T17:47:34.620 に答える
0

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

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

ここで比例的にサイズ変更する円のデモンストレーション

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

上記のサークルのデモンストレーションは、ここでの質問に従ってセクションに分割されています

于 2012-10-29T12:20:05.307 に答える