[CSS] @media query, 미디어 쿼리 이해 (반응형)

 

예시 1) screen and min-width 키워드

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

설명

(screen) 해당 컴퓨터 스크린에 대해서, (min-width) 해당 뷰의 최소 너비가 480px일 때에만,

body의 background-color를 라이크 그린으로 지정함.

(즉, 480px 이하이면, 다른 색깔로 됨)

 

예시 

https://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries1

 

예시 2) all and min-width 키워드

@media all and (min-width: 700px) {
  body {
    background-color: lightgreen;
  }
}

설명

(all) 모든 유형의 장치에 대해서, 해당 뷰의 최소 너비가 700px 일 때에만,

body의 background-color를 라이트 그린으로 지정함.

 

 

참고자료

https://www.nextree.co.kr/p8622/

CSS : 반응형 웹(Responsive Web)

 

https://eunhee-programming.tistory.com/178