미디어쿼리 반응형 적용

*max-width와 min-width
-max-width: 최대값, 이하/큰 값부터 내려오게 적기
-min-width: 최소값, 이상/작은 값부터 올라가게 적기

 

<max-width>

@media screen and (max-width:1200px){
  body{background-color: red;}
}/* screen :기기/ 최대넓이가 1200px /1200이하까지적용/ and양 옆 꼭 띄어주기*/
@media screen and (max-width:980px) {
 body{background-color: green;}
 }
@media screen and (max-width:600px) {
 body{background-color: green;}
}

 

<min-width>

@media screen and (min-width:600px){
 }/* screen :기기/min 600부터 980보다 작은거 (600부터 979까지)*/
@media screen and (min-width:980px) {
 }
@media screen and (min-width:1200px) {
 }

 

<구간적용 설정>

 @media screen and (max-width:1200px) and (min-width:600px){
 }

-쓴 순서에 상관없이 구간에 적용됨

 

 

 

@media screen only screen{}

@media screen not screen{}