반응형웹 media쿼리_해상도에따른 css구분

반응형웹_media쿼리.html

0px-480px(아이폰용)

 

481px-720px(안드로이드 스마트폰 세로모드)

 

721px-1024px(테블릿 PC가로모드)

 

그리고 1024px이상(일반 PC 와이드 모니터)

의 가로 해상도를 가질 경우의 4가지 경우의 스타일을 가집니다. 이건 원하시는데로 설정하시면 됩니다.

--------------소스-----------------------

@media screen and (max-width: 480px) {
body { background-color: red; }
h1 { color: white; }
}

@media screen and (min-width: 481px) and (max-width: 720px) {
body { background-color: green; }
h1 { color: red; }
}

@media screen and (min-width: 721px) and (max-width: 1024px) {
body { background-color: blue; }
h1 { color: yellow; }
}

 

@media screen and (min-width: 1025px) {
body { background-color: orange; }
h1 { color: black; }
}

 

[출처] 반응형 웹사이트, 모바일웹을 위한 CSS, @media쿼리를 살펴봐요.|작성자 Think 4U