모바일 장치의 급속한 인기로 인해 사용자는 더 이상 전통적인 컴퓨터를 사용하여 웹 콘텐츠를 탐색할 수 없습니다. 점점 더 많은 사용자가 If의 사용을 보장하기 위해 스마트폰, 태블릿 또는 기타 다양한 크기의 장치를 사용하기 시작하고 있습니다. 다양한 장치의 사용자는 좋은 경험을 할 수 있으므로 미디어 쿼리를 사용해야 합니다.
미디어 쿼리는 CSS 스타일 시트의 가장 중요한 기능 중 하나입니다. 소위 미디어 쿼리는 다양한 미디어 유형(장치 유형)을 기반으로 다양한 장치(예: 컴퓨터, 휴대폰, 태블릿, 점자 장치 등)를 구별하는 것을 말합니다. 및 조건에 대해 각각 다른 CSS 스타일을 정의합니다. 미디어 쿼리를 사용하면 CSS가 다른 장치 또는 동일한 장치의 다른 조건에서 더 정확하게 작동하여 모든 사용자가 좋은 사용자 경험을 얻을 수 있습니다.
1. 미디어 유형
미디어 유형은 장치 범주를 나타내는 데 사용됩니다. CSS는 다음 표와 같이 다양한 미디어 유형을 나타내는 몇 가지 키워드를 제공합니다.
2. 미디어 특성
특정 유형 외에도 다음 표에 표시된 것처럼 너비, 높이, 해상도 등과 같은 일부 속성을 통해 장치의 특정 특성을 설명할 수도 있습니다.
3. 논리 연산자
논리 연산자에는 not, and 및 only가 포함됩니다. 논리 연산자를 통해 복잡한 미디어 쿼리를 구성할 수도 있으며, 여러 미디어 쿼리를 쉼표로 구분하여 하나의 규칙으로 결합할 수도 있습니다.
and: 여러 미디어 쿼리를 하나의 미디어 쿼리로 결합하는 데 사용됩니다. 각 쿼리 규칙이 true이면 미디어 쿼리도 true가 됩니다.
not: 쿼리 규칙이 true가 아닌 경우 true를 반환하고, 그렇지 않으면 false를 반환하는 데 사용됩니다. not 연산자를 사용하는 경우 미디어 유형도 지정해야 합니다.
only: 전체 쿼리가 일치하는 경우에만 적용됩니다. only를 사용하지 않으면 이전 브라우저는 단순히 화면 및 (최대 너비: 500px)을 화면으로 해석하고 나머지 쿼리를 무시하고 스타일을 모든 화면에 적용합니다. only 연산자를 사용하는 경우 미디어 유형도 지정해야 합니다.
4. 미디어 쿼리 정의
현재 다음 두 가지 방법으로 미디어 쿼리를 정의할 수 있습니다.
@media 또는 @import 규칙을 사용하여 스타일 시트에 해당 장치 유형을 지정합니다.
<style>, <link>, <source> 또는 기타 HTML 요소에 특정 장치 유형을 지정하려면 media 속성을 사용하세요.
(1)@미디어
"CSS @Rules" 섹션에서 @media를 간략하게 살펴보았습니다. @media를 사용하면 미디어 쿼리와 CSS 스타일 블록을 지정할 수 있습니다. 문서에 적용됩니다. 샘플 코드는 다음과 같습니다.
/*992픽셀 이하의 화면에서는 배경색을 파란색으로 설정합니다*/@mediascreenand(max-width:992px){body{Background-color:blue;}}/*600픽셀 이하의 화면에서는 화면에서 배경색을 올리브색으로 설정합니다. */@mediascreenand(max-width:600px){body{Background-color:olive;}}(2) @가져오기
@import는 지정된 외부 스타일 파일을 가져오고 대상 미디어 유형을 지정하는 데 사용됩니다. 샘플 코드는 다음과 같습니다.
@importurl(css/screen.css)screen;/*외부 스타일을 도입합니다. 이 스타일은 컴퓨터 모니터에만 적용됩니다.*/@importurl(css/print.css)print;/*외부 스타일을 도입합니다. 이 스타일은 컴퓨터 모니터에만 적용됩니다. 인쇄 장치*/body{배경:#f5f5f5;line-height:1.2;}에 적용됨참고: 모든 @import 문은 스타일 시트의 시작 부분에 나타나야 하며 스타일 시트에 정의된 스타일은 가져온 외부 스타일 시트의 충돌하는 스타일을 재정의합니다.
(3) 미디어 속성
<style>, <link>, <source> 및 기타 태그의 미디어 속성에서 미디어 쿼리를 정의할 수도 있습니다. 샘플 코드는 다음과 같습니다.
/*페이지 너비가 900픽셀보다 크거나 같을 때 이 스타일 적용*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*페이지 너비가 다음보다 작을 때 이 스타일 적용 또는 600픽셀*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
팁: 쉼표를 사용하여 각 미디어 유형을 구분하여 미디어 속성에 여러 미디어 유형을 지정할 수도 있습니다(예: media=screen, print).