【Bootstrap基準】メディアクエリのテンプレート【コピペOK】

エンジニア
この記事は約3分で読めます。

こんにちは、オノユウ(@yumaonodera_)です。

備忘録として、メディアクエリのテンプレートをメモしておきます。

コピペで簡単に使用可能です。

Bootstrapを使用することを考え、ブレークポイントはBootstrap基準にしています。

PC表示から作る場合

PC表示から作る場合は、1200px以上で適用するCSSはメディアクエリの外に記述し、

1199px以下で適用するCSSはメディアクエリ内に書いていきます。

 

デスクトップ、タブレット、横向きモバイル、縦向きモバイルの4種で区切る「基本テンプレート」と、

タブレット、縦向きモバイルの2種で区切る「簡易テンプレート」を用意しました。

それぞれのデバイスで細かく表示を変更させたい場合は「基本テンプレート」を、

大まかに表示を変更させたい場合は「簡易テンプレート」をお使いください。

基本テンプレート

// デスクトップ, 1199px 以下
@media (max-width: 1199px) {
}

// タブレット, 991px 以下
@media (max-width: 991px) {
}

// 横向きモバイル, 767px 以下
@media (max-width: 767px) {
}

// 縦向きモバイル, 575px 以下
@media (max-width: 575px) {
}

簡易テンプレート

// タブレット, 991px 以下
@media (max-width: 991px) {
}

// 縦向きモバイル, 575px 以下
@media (max-width: 575px) {
}

スマホ表示から作る場合

スマホ表示から作る場合は、575px以下で適用するCSSはメディアクエリの外に記述し、

576px以上で適用するCSSはメディアクエリ内に書いていきます。

 

横向きモバイル、タブレット、デスクトップ、ワイド・デスクトップの4種で区切る「基本テンプレート」と、

タブレット、ワイド・デスクトップの2種で区切る「簡易テンプレート」を用意しました。

それぞれのデバイスで細かく表示を変更させたい場合は「基本テンプレート」を、

大まかに表示を変更させたい場合は「簡易テンプレート」をお使いください。

基本テンプレート

// 横向きモバイル, 576px 以上
@media (min-width: 576px) {
}

// タブレット, 768px 以上
@media (min-width: 768px) {
}

// デスクトップ, 992px 以上
@media (min-width: 992px) {
}

// ワイド・デスクトップ, 1200px 以上
@media (min-width: 1200px) {
}

簡易テンプレート

// タブレット, 768px 以上
@media (min-width: 768px) {
}

// ワイド・デスクトップ, 1200px 以上
@media (min-width: 1200px) {
}

まとめ

迷ったらとりあえず「簡易テンプレート」を使用すればOKです。

作っているうちに足りないなと感じたら、新たにメディアクエリを足しましょう。

コメント

タイトルとURLをコピーしました