CSSでレスポンシブMedia Queriesの振り分け条件

レスポンシブ、今や当たり前ですが未だに慣れません。ボタン一つで簡単設定できないので、最初の設計がとても大切ですね。

 

/*----------------------------------------------------
responsive指定法いろいろ
----------------------------------------------------*/

@media screen and (max-width: 1060px){

//ディスプレイの幅が1060px以下の時に表示する内容

}

@media screen and (max-width: 640px){

//ディスプレイの幅が640px以下の時に表示する内容

}

@media screen and (max-width: 320px){

//ディスプレイの幅が320px以下の時に表示する内容

}

@media screen and (min-width: 600px) and (max-width: 900px) {

//ディスプレイの幅が600px以上900以下の時に表示する内容

}

@media screen and (max-device-width: 320px) {

//デバイスのディスプレイの幅が最大320pxの時に表示する内容

}

 

Media Queriesの振り分け条件

Max Width:ビューエリアの最大幅。このサイズより小さい場合に適用

Min Width:ビューエリアの最小幅。このサイズより大きい場合に適用

Max Device Width:デバイスサイズの最大幅。このサイズより小さい場合に適用

Min Device Width:デバイスサイズの最小幅。このサイズより大きい場合に適用

Device Pixel Ratio:デバイスの解像度(webkit)

Orientation:デバイスの向き

この記事が気に入ったら
いいね ! しよう

Twitter で