CSS3의 미디어 쿼리 분석

이 글에서는 주로 CSS3 미디어 쿼리(반응형 레이아웃을 통해 다양한 해상도와 장치를 맞춤 설정할 수 있음)를 소개합니다. 이제 필요한 친구들이 참조할 수 있도록 공유하겠습니다.

미디어 쿼리 기능은 매우 훌륭합니다. 강력합니다. 다양한 해상도와 장치를 맞춤 설정할 수 있으며, 콘텐츠를 변경하지 않고도 생성한 웹 페이지가 다른 해상도와 장치에서 정상적으로 표시될 수 있으며 스타일 손실에 영향을 받지 않습니다.

미디어 쿼리는 다음과 같습니다. 매우 강력합니다. 다양한 해상도와 장치를 사용자 정의할 수 있으며, 생성한 웹 페이지가 콘텐츠를 변경하지 않고도 다양한 해상도와 장치에서 작동할 수 있도록 해줍니다.
먼저 간단한 예를 살펴보겠습니다.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

위의 미디어 설명은 페이지 너비가 600px보다 작거나 같을 때 small.css 스타일 시트를 호출하여 웹 페이지를 렌더링한다는 의미입니다. 먼저 미디어 성명에 포함된 내용을 살펴보겠습니다.
1. 화면: 말할 필요도 없이 모두가 알고 있는 미디어 유형입니다.
2. , 나중에 소개하겠습니다.
3.(최대 너비: 600px): 간단히 말해서 미디어의 특성입니다.
미디어 쿼리를 더 잘 이해하기 위해 이전 예제로 돌아가 보겠습니다. CSS로 변환하는 방법은 다음과 같습니다.

@media screen and (max-width: 600px) { 
选择器 { 
属性：属性值； 
} 
}

사실 스타일을 @media srceen의 small.css 파일에 넣고 (max-width ; 600px){…} 중괄호 안에 표시됩니다. 위의 명령문 구조에서 미디어 쿼리와 CSS의 속성 세트가 매우 유사하다는 것을 알 수 있습니다.
1. 미디어 쿼리는 단일 논리 표현식만 값으로 허용하거나 값을 갖지 않습니다. . CSS 속성 페이지 정보를 표시하는 방법을 선언하는 데 사용됩니다. 미디어 쿼리는 출력 장치가 특정 조건을 충족하는지 확인하는 데 사용되는 표현식입니다.
3. 대부분의 미디어 쿼리는 논리적 관계를 표현하기 위해 최소/최대 접두사를 허용합니다. 값이 특정 값보다 크거나 같거나 작거나 같을 때 사용됩니다.
4. CSS 속성에는 속성 값이 있어야 합니다. 미디어 쿼리의 표현식은 true 또는 false만 반환하므로 값을 가질 수 없습니다. 함께 살펴보세요 미디어 쿼리의 구체적인 사용법을 확인하세요

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

4. Not 키워드

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

미디어 쿼리에 미디어 유형이 명시적으로 지정되지 않은 경우 기본값은 다음과 같습니다.

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />