CSS 미디어 쿼리

CSS2에서 미디어 타입이 도입되었습니다.

CSS2에서 도입되었습니다. @media 규칙이 있어 다른 미디어 타입에 대해 다른 스타일 룰을 정의할 수 있게 합니다.

예를 들어, 컴퓨터 스크린용 스타일 룰, 프린터용 룰,手持기용 룰, 심지어 텔레비전용 룰까지도 있습니다.

불운히, 인쇄 미디어 타입 외에도 이러한 미디어 타입은 장치에 대한 대규모 지원을 받지 못했습니다.

CSS3은 미디어 쿼리를 도입했습니다

CSS3 미디어 쿼리는 CSS2 미디어 타입 개념을 확장합니다: 그들은 장치 타입을 찾지 않고 장치의 기능에 중점을 둡니다.

미디어 쿼리는 다양한 사항을 확인할 수 있습니다. 예를 들어:

  • 뷰포트의 너비와 높이
  • 장치의 너비와 높이
  • 방향(태블릿/스마트폰이 가로 모드인지 세로 모드인지)
  • 해상도

미디어 쿼리를 사용하는 것은 데스크톱, 노트북, 태블릿, 스마트폰(예: 아이폰과 안드로이드 스마트폰) 등에 맞춤형 스타일 시트를 제공하는 인기 있는 기술입니다.

브라우저 지원

표의 숫자는 완전히 지원 @media 규칙의 첫 번째 브라우저 버전.

속성
@media 21.0 9.0 3.5 4.0 9.0

미디어 쿼리 문법

미디어 쿼리는 하나의 미디어 타입으로 구성되며, 하나 이상의 표현식을 포함할 수 있으며, 이 표현식은 true 또는 false로 해석될 수 있습니다.

@media not|only mediatype and (expressions) {
  CSS-Code;
{}

지정된 미디어 타입이 현재 화면을 표시하는 장치 타입과 일치하며 미디어 쿼리 내의 모든 표현식이 true라면 쿼리 결과는 true입니다. 미디어 쿼리가 true일 때, 해당 스타일 시트나 스타일 규칙이 적용되며, 일반적인 캐시케이드 규칙을 따릅니다.

not 또는 only 연산자를 사용하지 않는 한 미디어 타입은 선택 사항이며 기본적으로 포함됩니다. all 유형.

다양한 미디어에 대해 다른 스타일 시트를 사용할 수도 있습니다:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 미디어 타입

값 설명
all 모든 미디어 타입 장치에 사용됩니다.
print 프린터에 사용됩니다.
screen 컴퓨터 스크린, 태블릿, 스마트폰 등에 사용됩니다.
speech 화면 읽기 기능을 가진 스크린 리더

미디어 쿼리의 간단한 예제

미디어 쿼리를 사용하는 방법 중 하나는 스타일 시트 내에 대체 CSS 부분을 포함하는 것입니다.

다음 예제에서는 뷰포트 너비가 480 픽셀 이상이면 배경색을 연녹색으로 변경합니다. (뷰포트 너비가 480 픽셀 미만이면 배경색은 분홍색이 됩니다):

예제

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

직접 시도해 보세요

다음 예제에서는 메뉴가 뷰포트 너비가 480 픽셀 이상이면 페이지의 왼쪽으로 부드럽게 이동하는 것을 보여줍니다. (뷰포트 너비가 480 픽셀 미만이면 메뉴는 컨텐츠의 상단에 위치합니다):

예제

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
{}

직접 시도해 보세요

더 많은 미디어 쿼리 예제

더 많은 미디어 쿼리 예제를 보려면 다음 페이지를 방문하십시오:CSS MQ 예제.

CSS @media 참조서

모든 미디어 타입 및 특성/표현식에 대한 완전한 설명은 다음을 참조하십시오: CSS 참조에서 @media 규칙.