Advanced Search

CSS Media Query

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.