レスポンシブデザインに使用する@mediaの設定

PC版からサイトデザインをする場合の@mediaの一覧

max-widthの書き方

max-widthは大きい順に書いていく。

注意すべきはiphone5のサイズである320pxだな。たいていこのサイズはレスポンシブでも調整が必要になるサイズだ。我もうまく設定できるようになりたいものだ。

モバイルファーストでレスポンシブデザインを設定したい場合は以下の記事で紹介しているからこちらを参考にするがよいぞ。
モバイルファーストのレスポンシブデザインの設定をする方法

@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 966px) {
}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 824px) {
}
@media only screen and (max-width: 800px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 736px){
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 654px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 605px) {
}
@media only screen and (max-width: 600px) {
}
@media only screen and (max-width: 583px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 445px) {
}
@media only screen and (max-width: 435px) {
}
@media only screen and (max-width: 430px){
}
@media only screen and (max-width: 425px){
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 412px) {
}
@media only screen and (max-width: 411px) {
}
@media only screen and (max-width: 400px) {
}
@media only screen and (max-width: 384px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}