CSS書くたびに
「あれ…？『max-width:1024px』ってどういう意味だっけ…？
ｶﾁｬｶﾁｬ（検索）…あぁ『1024pxより幅が狭い場合は適応』か。』
みたいな流れを繰り返しているので、メモしておく。
PCを基準にコーディングする場合
body{
background-color: whitesmoke;
}
/* タブレット用のブレークポイント */
@media only screen and (max-width: 1024px) {
body{
background-color: #c4ffcb;
}
}
/* スマホ用のブレークポイント */
@media only screen and (max-width: 599px) {
body{
background-color: #8ddef7;
}
}
スマホを基準にコーディングする場合
body{
background-color: #8ddef7;
}
/* タブレット用のブレークポイント */
@media only screen and (min-width: 600px) {
body{
background-color: #c4ffcb;
}
}
/* PC用のブレークポイント */
@media only screen and (min-width: 1025px) {
body{
background-color: whitesmoke;
}
}
そのままコピペしたら背景色がブレークポイントごとに変わるはず。
↧