【iPhone 13 ProMaxまで対応】レスポンシブデザインのブレイクポイントのテンプレ

こんにちは、ゆうが(@yuuuugablog)です。
今回は、最新の機種iPhone 13 ProMaxまで対応しているレスポンシブデザインのブレイクポイントを紹介します。

どうぞ、この記事に書いてあるブレイクポイントをテンプレート代わりにし、ご使用くださいませ。m(_ _)m

本記事のもくじ

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

レスポンシブデザインのブレイクポイントのテンプレ

CSS

/* PC用のCSS */
@media (min-width: 1200px) {

}

CSS

/* タブレット用のCSS */
@media (min-width:479px) and (max-width:768px) {

}

CSS

/* スマホ用のCSS */
@media (max-width: 479px) {

}

CSS

/* スマホ用のCSS */
@media (max-width: 375px;){

}

CSS

/* スマホ用のCSS */
@media (max-width: 390px;){

}

CSS

/* スマホ用のCSS */
@media (max-width: 428px;){

}

もし、モバイルファーストでブレイクポイントを書く場合でしたらスマホのブレイクポイントは不要で、タブレット・PCのブレイクポイントだけを書けばOKです。

具体的には、max-widthの部分をmin-widthに変えて、下記の記述を先にしてください。

CSS

/* タブレット用のCSS */
@media (min-width:481px){

}

CSS

/* PC用のCSS */
@media (min-width: 1200px) {

}

web制作などはモバイルファーストで作ると、後々やり直すときの手間が省けたりとメリットがあります。

最後になりますが、今回ご紹介したブレイクポイントのテンプレは、BoostNoteというエンジニア必須アプリに貼っていただくと超絶便利になります。
知らない方のために軽く説明しますと、エンジニアのメモ帳で自分がよく使うコードなどを保存できるアプリです。

詳しい内容や使い方などは、こちら【完全無料】BoostNoteの特徴や使い方を解説で書いていますので参考にしてみてください。