こんにちは、ゆうが(@yuuuugablog)です。
今回は、最新の機種iPhone 13 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) {
}iPhone12,13mini用のブレイクポイント
CSS
/* スマホ用のCSS */
@media (max-width: 375px;){
}iPhone12,13・12,13Pro用のブレイクポイント
CSS
/* スマホ用のCSS */
@media (max-width: 390px;){
}iPhone12,13 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) {
}web制作などはモバイルファーストで作ると、後々やり直すときの手間が省けたりとメリットがあります。
ゆうが
なので、web制作をしている方ならモバイルファーストで作るようにしましょう！
BoostNoteに書くと、爆速で作業ができる
最後になりますが、今回ご紹介したブレイクポイントのテンプレは、BoostNoteというエンジニア必須アプリに貼っていただくと超絶便利になります。
知らない方のために軽く説明しますと、エンジニアのメモ帳で、自分がよく使うコードなどを保存できるアプリです。
詳しい内容や使い方などは、こちら【完全無料】BoostNoteの特徴や使い方を解説で書いていますので参考にしてみてください。
なので是非、BoostNoteにブレイクポイントを貼り付けて、いつでも効率よく作業できるようにしましょう！
