カテゴリー: web

[CSS]iPad、iPhone 5 向けレスポンシブWEBデザインに必要な Media Queries のまとめ

CSS]iPad、iPhone 5 向けレスポンシブWEBデザインに必要な Media Queries のまとめ

ブラウザ幅での条件分岐が詳しく書かれている。必読

横向き、縦向き

横向き

1 @media only screen
2     and (orientation:landscape) {
3 }

 

縦向き

1 @media only screen
2     and (orientation:portrait) {
3 }

 

端末別（iPad、iPhone）

iPad 横向き

1 /*1024px*/
2 @media only screen
3     and (min-device-width:768px) 
4     and (max-device-width:1024px) 
5     and (orientation:landscape) {
6 }

 

iPad 縦向き

1 /*768px*/
2 @media only screen
3     and (min-device-width:768px) 
4     and (max-device-width:1024px) 
5     and (orientation:portrait){
6 }

 

iPhone 5

1 /*568px*/
2 @media only screen
3     and (min-device-width:320px) 
4     and (max-device-width:568px) {
5 }

 

iPhone 横向き

1 /*480px*/
2 @media only screen
3     and (min-device-width:320px) 
4     and (max-device-width:480px) 
5     and (orientation:landscape) {
6 }

 

iPhone 縦向き

1 /*320px*/
2 @media only screen
3     and (max-device-width:320px)
4     and (orientation:portrait){
5 }

 

高解解像度用

1 @media only screen
2     and (-webkit-min-device-pixel-ratio: 2) {
3 }

 

ブラウザ幅での条件分岐

01 /*1024px*/
02 @media screen
03     and (max-width: 1024px) {
04 }
05
06 /*768px*/
07 @media screen
08     and (max-width: 768px) {
09 }
10
11 /*480px*/
12 @media screen
13     and (max-width: 480px) {
14 }
15
16 /*320px*/
17 @media screen
18     and (max-width: 320px) {
19 }

横向き、縦向き

横向き

@media only screen
and (orientation:landscape) {
}

縦向き

@media only screen
and (orientation:portrait) {
}

端末別（iPad、iPhone）

iPad 横向き

/*1024px*/
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:landscape) {
}

iPad 縦向き

/*768px*/
@media only screen
and (min-device-width:768px)
and (max-device-width:1024px)
and (orientation:portrait){
}

iPhone 5

/*568px*/
@media only screen
and (min-device-width:320px)
and (max-device-width:568px) {
}

iPhone 横向き

/*480px*/
@media only screen
and (min-device-width:320px)
and (max-device-width:480px)
and (orientation:landscape) {
}

iPhone 縦向き

/*320px*/
@media only screen
and (max-device-width:320px)
and (orientation:portrait){
}

高解解像度用

@media only screen
and (-webkit-min-device-pixel-ratio: 2) {
}

ブラウザ幅での条件分岐

/*1024px*/
@media screen
and (max-width: 1024px) {
}

/*768px*/
@media screen
and (max-width: 768px) {
}

/*480px*/
@media screen
and (max-width: 480px) {
}

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

デバイスに合わせてCSSを振り分ける「Media Queries」