css3 media 쿼리 예시(모바일웹)

유형1>

view source

print?

1.<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

2.<link rel="stylesheet" href="smartphone-landscape.css" media="only screen and (min-width : 321px)">

3.<link rel="stylesheet" href="smartphone-portrait.css" media="only screen and (max-width : 320px)">

4.<link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

5.<link rel="stylesheet" href="ipad-landscape.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">

6.<link rel="stylesheet" href="ipad-portrait.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">

7.<link rel="stylesheet" href="widescreen.css" media="only screen and (min-width : 1824px)">

8.<link rel="stylesheet" href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

유형2>

view source

print?

1.#page {width:100%;height:100%;background-color:#666;}

2. 

3.@media (max-width:1024px) {

4.#page {background-color:#fff;}

5.}

6.@media (max-width:509px) {

7.#page {background-color:#ff0;}

8.}