부트스트랩에서 미디어 쿼리는 화면 크기에 따라 사용되는 장치를 구별하고 다양한 스타일을 설정할 수 있으며 다양한 조건에서 다양한 스타일을 사용하여 다양한 터미널 기기에서 페이지의 다양한 렌더링 효과를 얻을 수 있습니다.
이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!