CSS - media 쿼리

반응형 웹 구현을 위해 필수로 알아야 할 media 쿼리

 

screen 사이즈별로 조건을 걸어 원하는 스타일을 지정 할 수 있다.

 

 

 @media 미디어타입 and 조건 {

        조건에 부합 할 경우 결과 스타일

 

  }

 

    미디어타입

    screen - 브라우저 화면

    조건 속성 ( 자주 사용하는 것 )

    min-width      이 최소 넓이 이상이면

    max-width      이 최대 넓이 이하이면

    min-height     이 최소 높이 이상이면

    max-height     이 최소 높이 이하이면

    orientation    portrait , landscape 감지

    color          기기의 색상당 비트 수

    color-index    출력 기기의 색상 테이블 수

    aspect-ratio   디스플레이 영역의 넓이와 높이의 비율

 

   

    max-width: 1900px 와이드pc

    max-width: 1280px 일반pc

    max-width: 1024px 태블릿

    max-width: 768px  모바일기기 (중)

    max-width: 640px  모바일기기 (소)

    max-width: 320px  모바일기기 (기본최소)