カラーミーキットなら、PC、タブレット、スマートフォンに対応したレスポンシブなグリッドレイアウトを簡単に作成することができます。
.rowの子要素に.col .col-lg-[n]のclassを適用させます。
<div class="row">
<div class="col col-lg-[n]"></div>
...
<div class="col col-lg-[n]"></div>
</div><div class="row">
<div class="col col-lg-1">
col-lg-1
</div>
...
<div class="col col-lg-1">
col-lg-1
</div>
</div>
<div class="row">
<div class="col col-md-6 col-lg-3">
col-lg-3 col-md-6
</div>
...
<div class="col col-md-6 col-lg-3">
col-lg-3 col-md-6
</div>
</div>
<div class="row">
<div class="col col-lg-4 col-sm-12">
col-lg-4 col-sm-12
</div>
...
<div class="col col-lg-4 col-sm-12">
col-lg-4 col-sm-12
</div>
</div>デバイスのサイズに応じたclassの書き方は以下の表をご参照ください。
| class | 参考デバイス | デバイスサイズ |
|---|---|---|
.col-lg-[n] |
デスクトップ | 全てのデバイスサイズに適用 |
.col-md-[n] |
デスクトップ〜タブレット | 980px以下のデバイスに適用 |
.col-sm-[n] |
タブレット〜スマートフォン | 768px以下のデバイスに適用 |
.col-xs-[n] |
スマートフォン | 480px以下のデバイスに適用 |
/* 全てのデバイスサイズに適用 */
@media (max-width: 980px) {
/* デバイスサイズ 980px以下に適用 */
}
@media (max-width: 768px) {
/* デバイスサイズ 768px以下に適用 */
}
@media (max-width: 480px) {
/* デバイスサイズ 480px以下に適用 */
}| class | 768px 以下 | 980px 以下 | 981px 以上 |
|---|---|---|---|
.visible-phone |
表示 | 非表示 | 非表示 |
.visible-tablet |
非表示 | 表示 | 非表示 |
.visible-desktop |
非表示 | 非表示 | 表示 |
.hidden-phone |
非表示 | 表示 | 表示 |
.hidden-tablet |
表示 | 非表示 | 表示 |
.hidden-desktop |
表示 | 表示 | 非表示 |
ウィンドウのサイズによって表示が切り替わります。