CSS _ Media Query (반응형 웹 만들기)

모바일 우선으로 스타일링

min-width 사용 (최소 가로사이즈 보다 큰 경우)

작은 가로폭부터 큰 가로폭 순서로 적용

/* 기본 (가로 360px보다 작은 화면에 적용되는 스타일) */
  div {
    background-color: red;
  }
/* 가로 360px보다 큰 화면에 적용되는 스타일 */
@media (min-width: 360px) {
  div {
    background-color: orange;
  }
}
/* 가로 600px보다 큰 화면에 적용되는 스타일 */
@media (min-width: 600px) {
  div {
    background-color: yellow;
  }
}
/* 가로 1000px보다 큰 화면에 적용되는 스타일 */
@media (min-width: 1000px) {
  div {
    background-color: green;
  }
}

 

 

데스크탑 우선으로 스타일링

max-width 사용 (최대 가로사이즈 보다 작을 경우)

큰 가로폭부터 작은 가로폭 순서로 적용

/* 기본 (가로 1000px보다 큰 화면에 적용되는 스타일) */
div {
  background-color: green;
}
/* 가로 1000px보다 작은 화면에 적용되는 스타일 */
@media (max-width: 1000px) {
  div {
    background-color: yellow;
  }
}
/* 가로 600px보다 작은 화면에 적용되는 스타일 */
@media (max-width: 600px) {
  div {
    background-color: orange;
  }
}
/* 가로 360px보다 작은 화면에 적용되는 스타일 */
@media (max-width: 360px) {
  div {
    background-color: red;
  }
}

 

조건에 따른 스타일링

portrait : 세로모드

landscape : 가로모드

@media screen and (min-width: 500px) and (orientation: landscape) {
//뷰 포트의 너비가 최소 500px 이상이고 장치가 가로모드인 경우에만 div의 color는 gray.
//조건이 모두 충족한 경우에만 적용
	div {
    	color: gray;
    }
}

@media screen and (min-width: 500px), and (orientation: landscape) {
//뷰 포트의 너비가 최소 500px 또는 장치가 가로모드인 경우 div의 color는 gray.
//하나의 조건이라도 충족한 경우 적용
	div {
    	color: gray;
    }
}

@media not all and (orientation: landscape) {
//모든 장치가 가로모드가 아닌 경우에만(즉 세로모드인경우에만) div의 color는 gray.
	div {
    	color: gray;
    }
}