부트스트랩 미디어 쿼리는 무엇을 합니까?

부트스트랩에서 미디어 쿼리는 화면 크기에 따라 사용되는 장치를 구별하고 다양한 스타일을 설정할 수 있으며 다양한 조건에서 다양한 스타일을 사용하여 다양한 터미널 기기에서 페이지의 다양한 렌더링 효과를 얻을 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

bootstrap 미디어 쿼리는 화면 크기를 사용하여 사용 중인 장치를 식별합니다.

• 매우 작음 기기(휴대폰, 768px 미만)

• 소형 기기(태블릿, 768px 이상)

• 중형 기기(데스크톱, 992px 이상)

• 대형 기기(대형 데스크톱, 1200px 이상)

미디어 쿼리는 다양한 조건에서 다양한 스타일을 사용하여 다양한 터미널 장치에서 페이지에 다양한 렌더링 효과를 얻을 수 있습니다. 미디어 쿼리가 프로젝트에서 어떻게 참조되는지 간략하게 소개했지만, 미디어 쿼리에는 고유한 사용 규칙이 있습니다. 구체적으로 미디어 쿼리를 사용하는 방법은 다음과 같습니다.

@media 媒体类型and （媒体特性）{你的样式}

참고: 미디어 쿼리를 사용할 때는 "@media"로 시작한 다음 미디어 유형(장치 유형이라고도 함)을 지정한 다음 미디어 특성(장치 특성이라고도 함)을 지정해야 합니다. 미디어 속성의 작성 방법은 스타일의 작성 방법과 매우 유사합니다. 크게 두 부분으로 나누어집니다. 첫 번째 부분은 미디어 속성을 나타내며 두 ​​번째 부분은 미디어 속성에서 지정하는 값이며 콜론은 다음과 같습니다. 두 부분 사이에 사용됩니다. 예:

(max-width: 480px)
从前面表中可以得知，主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合。
但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

1. 최대 너비 max-width

"max-width"는 미디어 속성 중 가장 일반적으로 사용되는 기능입니다. 이는 미디어 유형이 지정된 너비보다 작거나 같은 경우를 의미합니다. 스타일이 적용됩니다. 예:

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

위의 의미는 화면이 480px 이하일 때 페이지의 광고 블록(.ads)이 숨겨진다는 의미입니다.

2. 최소 너비 min-width

"min-width"는 "max-width"의 반대입니다. 즉, 미디어 유형이 지정된 너비보다 크거나 같을 때 스타일이 적용됩니다. .

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

위의 의미: 화면이 900px보다 크거나 같을 때 컨테이너 ".wrapper"의 너비는 980px입니다.

3. 다양한 미디어 기능 사용

미디어 쿼리는 "and"라는 키워드를 사용하여 여러 미디어 기능을 결합할 수 있습니다. 즉, 미디어 쿼리는 0개에서 그 이상의 표현식을 포함할 수 있고, 표현식은 0개에서 그 이상의 키워드와 미디어 유형을 포함할 수 있습니다.

화면이 600px~900px 사이에서는 아래와 같이 본체의 배경색이 "#f5f5f5"로 렌더링됩니다.

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

4. 기기 화면 출력 폭

iPhone, iPad 등 스마트 기기에서는 화면 크기에 따라 해당 스타일을 설정(또는 해당 스타일 파일을 호출)할 수도 있습니다. 스크린 장치. 마찬가지로 화면 장치의 경우 "min-device-width" 또는 "max-device-width"와 같은 "최소/최대" 해당 매개변수를 사용할 수도 있습니다.

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

위 코드는 iPhone의 디스플레이와 같이 최대 장치 너비 480px에 적합한 "iphone.css" 스타일을 나타냅니다. 여기서 "max-device-width"는 실제 해상도를 나타냅니다. 장치, 또한 시각적 영역 해상도를 나타냅니다.

5. Not 키워드

"not" 키워드를 사용하면 지정된 특정 미디어 유형, 즉 해당 표현과 일치하는 장치를 제외하는 데 사용됩니다. 즉, not 키워드는 다음과 같은 표현식에 대해 반전 연산을 수행한다는 의미입니다.

@media not print and (max-width: 1200px){样式代码}

위 코드는 스타일 코드가 인쇄 장치 및 장치 너비가 1200px 미만인 장치를 제외한 모든 장치에서 사용됨을 나타냅니다.

6. 유일한 키워드

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

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

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

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

또한 스타일에서 여러 문을 사용하여 동일한 스타일을 다른 미디어에 적용할 수도 있습니다. 종류 및 매체 특성상 규격방법은 다음과 같습니다.

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

위 코드의 style.css 스타일은 너비가 480px 이하인 휴대용 장치 또는 화면 너비가 960px보다 크거나 같은 장치에서 사용됩니다.

지금까지 CSS3 미디어 쿼리는 많은 브라우저에서 지원되며 IE6-8 브라우저를 제외한 모든 최신 브라우저에서 완벽하게 지원됩니다. 또 다른 차이점은 다른 CSS3 속성처럼 다른 브라우저에서 미디어 쿼리 앞에 접두사를 붙일 필요가 없다는 것입니다.

【관련 추천: "부트스트랩 튜토리얼"】

위 내용은 부트스트랩 미디어 쿼리는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!