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

Last modified date

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) {
}

魔王様

コメントを残す

メールアドレスが公開されることはありません。

Post comment