css3 미디어 쿼리미디어 쿼리

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 코드를 사용하세요.

지속적인 학습
||
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:4px; padding:2px; } @media screen and (min-width: 480px) { #leftsidebar {width:200px;float:left;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">Menu-item 1</li> <li class="menuitem">Menu-item 2</li> <li class="menuitem">Menu-item 3</li> <li class="menuitem">Menu-item 4</li> <li class="menuitem">Menu-item 5</li> </ul> </div> <div id="main"> <h1>重置浏览器窗口查看效果!</h1> <p>在屏幕可视窗口尺寸小于 480 像素时将菜单浮动到页面左侧。</p> </div> </div> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~