CSS3의 미디어 쿼리 분석

不言원래의: 2018-06-26 11:48:581352검색

이 글에서는 주로 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만 반환하므로 값을 가질 수 없습니다. 함께 살펴보세요 미디어 쿼리의 구체적인 사용법을 확인하세요

1. Max Width

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

위의 의미는 화면이 900px 이상이면 big.css 스타일을 사용하여 웹을 렌더링한다는 것입니다. 페이지.

2. 여러 미디어 쿼리 사용

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

미디어 쿼리는 여러 미디어 쿼리와 결합될 수 있습니다. 즉, 미디어 쿼리에는 0개 이상의 키워드가 포함될 수 있습니다. . 위에 표시된 것처럼 화면이 600px-900px 사이에 있을 때 style.css 스타일을 사용하여 웹 페이지를 렌더링한다는 의미입니다.

3. Device Width

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

위 코드는 최대 기기 너비 480px에 적합한 iphone.css 스타일을 나타냅니다. 예를 들어 iPhone의 디스플레이에서 여기서 max-device-width는 다음을 나타냅니다. 은 장치의 실제 해상도이며 시각적 영역 해상도를 나타냅니다
미디어 쿼리를 사용하여 다양한 해상도의 안드로이드 폰에 특정 스타일을 제공할 수 있으므로 다양한 화면 해상도로 인한 안드로이드 폰의 페이지 재구성 문제를 해결할 수 있습니다. .

4. Not 키워드

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

not 키워드는 지정된 특정 미디어 유형을 제외하는 데 사용됩니다. 즉, 해당 표현과 일치하는 장치를 제외하는 데 사용됩니다.

5. 유일한 키워드

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

only는 특정 미디어 유형을 정의하는 데 사용되며 미디어 쿼리를 지원하지 않는 브라우저를 제외하는 데 사용할 수 있습니다. 실제로 only는 미디어 쿼리를 지원하지 않지만 미디어 유형을 지원하는 장치의 스타일 시트를 숨기는 데 자주 사용됩니다. 주요 사항은 다음과 같습니다. 미디어 기능(미디어 쿼리)을 지원하는 장치의 경우 스타일이 정상적으로 호출되면 미디어 기능(미디어 쿼리)을 지원하지 않지만 미디어를 지원하는 장치에 대해서는 존재하지 않는 것처럼 처리됩니다. 유형(Media Type)은 화면이 아닌 읽기 전용이므로 스타일을 읽지 않습니다. 또한 Media Qqueries를 지원하지 않는 브라우저에서는 지원 여부에 관계없이 스타일을 사용하지 않습니다.

6. 기타

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

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

또한 다음과 같이 쉼표(,)를 사용하여 병렬 또는 또는을 나타냅니다.
위 코드의 style.css 스타일은 너비가 480px 이하인 휴대용 장치 또는 화면 너비가 960px 이상인 장치에서 사용됩니다.

미디어 쿼리 사용에 대한 이 섹션이 여기에 소개되었습니다. 마지막으로 그 기능을 전반적으로 요약하겠습니다. 개인적으로 이 내용은 한 문장에 불과하다고 생각합니다. 미디어 쿼리는 다양한 조건에서 다양한 스타일을 사용할 수 있으며 페이지를 사용하여 다양한 렌더링을 수행할 수 있습니다. 효과.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3의 미디어 쿼리 분석

관련 기사