css3의 미디어 쿼리 사용에 대한 자세한 설명:
현재 고정 너비 웹사이트는 점차적으로 반응형 디자인으로 대체되고 있으며 이는 피할 수 없는 추세입니다.
반응형 디자인이란 어떤 화면이나 기기를 사용하더라도 페이지가 잘 표시될 수 있다는 의미입니다(페이지 표시 스타일은 기기마다 다를 수 있음).
반응형 디자인은 다양한 크기와 모양의 장치로 인해 프로그래머가 겪는 문제를 해결하여 기존 컴퓨터, 휴대폰 또는 태블릿에서 웹 페이지가 정상적으로 표시되도록 합니다.
미디어 쿼리 기술을 통해 반응형 디자인을 잘 구현할 수 있습니다. 아래에서 미디어 쿼리를 소개하겠습니다.
1. CSS2의 미디어 쿼리:
실제로 CSS2에는 미디어 쿼리 응용 프로그램이 있지만 비교적 간단합니다. 다음 코드를 참조하세요.
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
위 코드는 각각 모니터 및 모든 유형의 장치에 대한 세 가지 CSS 파일을 규정합니다. 그리고 프린터.
2. 미디어 쿼리 사용 방법:
기본적으로 CSS 사용에 적합한 미디어 쿼리를 사용하는 방법은 다음과 같습니다.
링크 방법 소개:
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
xml 방법 소개:
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
@ 도입된 가져오기 방법:
@import url("css/reset.css") screen;CSS 코드에 사용:
@media screen{
选择器{
属性：属性值；
}
}스타일 태그에 사용:
<style type="text/css" media="screen">
/*code*/
</style>
3. 미디어 쿼리 규칙:
Css2의 미디어 쿼리는 매우 간단하며 미디어 유형만 구분할 수 있습니다.
CSS3는 미디어 유형뿐만 아니라 미디어와 관련된 속성을 기반으로 하는 미디어 쿼리를 확장했습니다.
다음 코드 예시를 보세요:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="softwhy.css" />
페이지 너비가 600px 이하이고 화면에 적용되면 Softwhy.,css가 호출됩니다. 쿼리 규칙:
미디어 유형과 그 뒤에 특정 조건(예: 최소 화면 너비)을 확인하는 하나 이상의 표현식이 포함됩니다.
미디어 속성 방식, @media 방식 등 사용 방식이 다르고 미디어 쿼리를 정의하는 방식도 다르지만 규칙은 동일합니다.
(1). 간단한 코드:
@media all and (min-width:800px) {
/*code*/
} 최소 가로 화면 너비가 800픽셀인 모든 화면은 해당 CSS 코드를 사용합니다.
특별 참고 사항: 미디어 유형이 all인 경우 all은 생략 가능하며, 축약 코드는 다음과 같습니다.
@media (min-width:800px) {
/*code*/
} (2) 복잡한 쿼리 코드:
@media (min-width:800px) and (max-width:1200px) {
/*code*/
} (3) . 및 키 단어:
and는 조건이 동시에 충족되어야 함을 지정하는 데 사용됩니다. 코드는 다음과 같습니다.
@media screen (min-width:800px) and (max-width:1200px) {
/*code*/
}화면이 800px 이상 1200px 이하인 경우, 해당 CSS 코드가 사용됩니다.
(4).or 키워드:
or는 하나의 조건이 충족되는 한 코드는 다음과 같이 지정하는 데 사용됩니다.
@media screen (min-width:800px) or (orientation:portrait) {
/*code*/
}화면 크기가 대략 800px과 같거나 방향이 세로인 경우 해당 CSS 코드가 사용됩니다.
(5).not 키워드:
not은 지정된 조건이 충족되지 않을 때 설정할 수 있음을 지정하는 데 사용됩니다.
@media not print{
/*code*/
}프린터 장치가 아닌 경우 해당 CSS 코드를 사용하세요.
다음 섹션