[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를 라이트 그린으로 지정함.