Posted By

melomano on 05/09/11


Tagged


Versions (?)

CSS Media Query


 / Published in: CSS
 

  1. /* 스마트폰에서만 적용되는 CSS. HTC Desire HD는 가로 모드에서 폭이 533px. */
  2. @media only screen and (min-device-width:320px) and (max-device-width:569px) {
  3. /* style */
  4. }
  5.  
  6. /* 스마트폰 가로 */
  7. @media only screen and (min-width:480px) {
  8. /* style */
  9. }
  10.  
  11. /* 스마트폰 세로 */
  12. @media only screen and (max-width:320px) {
  13. /* style */
  14. }
  15.  
  16. /* iPhone 4 등 고해상도 */
  17. @media only screen and (-webkit-min-device-pixel-ratio:1.5),
  18. only screen and (-o-min-device-pixel-ratio:3/2),
  19. only screen and (min-device-pixel-ratio:1.5) {
  20. /* style */
  21. }
  22.  
  23. /* iPad 가로 */
  24. @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
  25. /* style */
  26. }
  27.  
  28. /* iPad 세로 */
  29. @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
  30. /* style */
  31. }

Report this snippet  

You need to login to post a comment.