こんにちは、ゆうが(@yuuuugablog)です。
今回は、最新の機種iPhone12 ProMaxまで対応しているレスポンシブデザインのブレイクポイントを紹介します。
どうぞ、この記事に書いてあるブレイクポイントをテンプレート代わりにし、ご使用くださいませ。m(_ _)m
スポンサーリンク
レスポンシブデザインのブレイクポイントのテンプレ
PC用のブレイクポイント
CSS
/* PC用のCSS */
@media (min-width: 1200px) {
}タブレット用のブレイクポイント
CSS
/* タブレット用のCSS */
@media (min-width:479px) and (max-width:768px) {
}スマホ用のブレイクポイント
CSS
/* スマホ用のCSS */
@media (max-width: 479px) {
}iPhone12mini用のブレイクポイント
CSS
/* スマホ用のCSS */
@media (max-width: 375px;){
}iPhone12,12Pro用のブレイクポイント
CSS
/* スマホ用のCSS */
@media (max-width: 390px;){
}iPhone12 ProMax用のブレイクポイント
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) {
}BoostNoteに書くと更に便利
最後になりますが、今回ご紹介したブレイクポイントのテンプレは、BoostNoteというエンジニア必須アプリに貼っていただくと超絶便利になります。
知らない方のために軽く説明しますと、エンジニアのメモ帳で、自分がよく使うコードなどを保存できるアプリです。
詳しい内容や使い方などは、こちらの記事【神アプリ】web制作で使える便利ツールは、BoostNoteで決まりで書いていますので参考にしてみてください。
【完全無料】BoostNoteの特徴や使い方を解説
時給単価上がりましたよ！
なので是非、BoostNoteにブレイクポイントを貼り付けて、いつでも効率よく作業できるようにしましょう！
今回は以上です。
参考になれば幸いです。