CSS media 쿼리 사용

CSS media 쿼리를 사용하여 반응형 웹페이지를 구현할 수 있다.

 

아래와 같은 경우 브라우저 화면이 1145px까지는 해당 스타일이 적용된다는 예이고.

 

@media ( max-width : 1145px) {
 .menu-tab li a {font-weight: 600;text-decoration: none;padding: 20px 8px;letter-spacing: -1px;display: block;color: #000;
  transition: all 0.2s ease-in-out 0s;border-top: 1px solid #e6e8e8;font-size: 13px;}
}

 

아래와 같은 경우 브라우저 화면이 480px 이하일 경우 해당 스타일이 적용된다는 것이다.

참고로 media  다음에 디펄트는 all이고 screen이나 print 등을 지정할 수 있다.

 

@media screen and (min-width: 480px) {
 .selct-mom {max-width: 720px;width: 100%;margin: 0 auto;overflow: hidden;font-size: 12px;font-weight: 700;letter-spacing: -1px;}
}