よくあるシンプルなメディアクエリの書き方メモ

ざっくり、メディアクエリの書き方





360px 以上

?

1 2 3 4 5

@media screen and (min-width: 360px) {     .test {         margin: 10px;     } }

360px 以下

?

1 2 3 4 5

@media screen and (max-width: 360px) {     .test {         margin: 10px;     } }

768px から 1024px の間

?

1 2 3 4 5

@media screen and (min-width:768px) and ( max-width:1024px) {     .test {         margin: 10px;     } }