0

CSS とレスポンシブ デザインのしくみを理解しようとしています。ここで小さな例を作りました。

シンプルなタイルのテンプレートです。

タイルを 2、3、4、またはそれ以上の列で表示できるようにしたいと考えています。このサンプルでは、​​div の「ラッパー」クラスc2, c3, c4を変更して列数を変更するだけです。

これは、タイルが左に浮いており、これらがc2, c3, c4ラッパーの幅を変更するために機能します。HTML および CSS ファイルを参照するか、JSFiddleにアクセスしてください。

HTML

<div class="wrapper c2"> <!-- try with c3, c4-->
    <div class="scrollable">
        <div class="webbutiles">
            <a href='?page_id=77'  class='tile TBlue iconmain '><div class='boxContent'><i class='icon-group'></i></div><div class='tilename '><div class='name'>Tile 1</div></div></a>
            <a href='?page_id=85'  class='tile TDarkGreen iconmain '><div class='boxContent'><i class='icon-comments-alt'></i></div><div class='tilename '><div class='name'>Tile 2</div></div></a>
            <a href='?page_id=89'  class='tile TDarkPurple iconmain '><div class='boxContent'><i class='icon-cogs'></i></div><div class='tilename '><div class='name'>Tile 3</div></div></a>
            <a href='?page_id=91'  class='tile TDarkBlue iconmain '><div class='boxContent'><i class='icon-table'></i></div><div class='tilename '><div class='name'>Tile 4</div></div></a>
            <a href='?page_id=93'  class='tile TDarkRed iconmain '><div class='boxContent'><i class='icon-heart'></i></div><div class='tilename '><div class='name'>Tile 5</div></div></a>
            <a href='?page_id=95'  class='tile TTwitterBlue iconmain '><div class='boxContent'><i class='icon-twitter'></i></div><div class='tilename '><div class='name'>Tile 6</div></div></a>
            <a href='?page_id=97'  class='tile TGreen iconmain '><div class='boxContent'><i class='icon-columns'></i></div><div class='tilename '><div class='name'>Tile 7</div></div></a>
            <a href='?page_id=87'  class='tile TOrange t2x iconmain '><div class='boxContent'><i class='icon-reorder'></i></div><div class='tilename '><div class='name'>Tile Large</div></div></a>
        </div>
    </div>
</div>

CSS

    /* General tile settings */
.tile{ display:block;  float:left;  background-color:#525252;  width:150px;  height:150px;  cursor:pointer;  text-decoration:none;  color:#fff;  overflow:hidden;  position:relative;  font-weight:300;  font-size:11pt;  letter-spacing:0.02em;  line-height:20px;  margin:0 10px 10px 0;  overflow:hidden}
.tile:hover{ outline:3px #3a3a3a solid}


/* Tile responsive setting. */
@media (min-width:1025px){
    .wrapper{width:1024px}
}

.wrapper{margin-left:auto; margin-right:auto}
.wrapper.c2{width:400px}
.wrapper.c3{width:600px}
.wrapper.c4{width:800px}
.wrapper.c5{width:1000px}
.resimgicon {max-width:62px;height:auto;}
.tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;}
.tile{ width:157px;  height:157px}
.tile.t2x{ width:324px}
.tile.t2x .boxContent{ width:324px}

@media (max-width:640px){
    .wrapper{margin-left:auto; margin-right:auto}
    .wrapper.c2{width:324px}
    .wrapper.c3{width:491px}
    .wrapper.c4{width:658px}
    .wrapper.c5{width:785px}
    .resimgicon {max-width:64px;height:auto;}
    .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;}
    .tile{ width:147px;  height:147px}
    .tile.t2x{ width:304px}
    .tile.t2x .boxContent{ width:304px}
}

@media (max-width:360px){
    .wrapper{margin-left:auto; margin-right:auto}
    .wrapper.c2{width:184px}
    .wrapper.c3{width:281px}
    .wrapper.c4{width:378px}
    .wrapper.c5{width:435px}
    .resimgicon {max-width:38px;height:auto;}
    .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;}
    .tile{ width:77px;  height:77px}
    .tile.t2x{ width:164px}
    .tile.t2x .boxContent{ width:164px}
}

固定のタイルとラッパー サイズで作業するのが好きではないので、この CSS は好きではありません。これにより、左右の (自動) マージンが作成されます。大きな画面では問題ありませんが、電話やタブレットの画面では役に立ちません。

ラッパー幅を固定せずに列を持つタイル システムを作成するにはどうすればよいですか? この種のタイルを生成するより良い方法はありますか?

4

1 に答える 1