CSS3의 미디어 미디어 쿼리 사용에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS3의 미디어 미디어 쿼리 사용에 대한 자세한 설명

黄舟

풀어 주다： 2017-09-01 15:06:17

원래의

1583명이 탐색했습니다.

최근 반응형 레이아웃의 발전으로 한 번 개발하여 여러 번 사용할 수 있는 반응형 웹사이트에 대한 수요가 늘어나고 있습니다. 하지만 웹사이트를 화면에 맞게 조정하려면 어떻게 해야 할까요? 여기서 우리는 CSS3의 새로운 기술인 미디어 미디어 쿼리기를 언급할 필요가 있습니다.

그렇다면 미디어 쿼리어란 무엇일까요?

Media 미디어 쿼리어는 웹사이트를 여는 터미널의 화면 해상도를 감지할 수 있는 CSS3의 새로운 기술입니다.

Media 미디어 쿼리기는 대략 다음과 같이 사용됩니다.

1. 다음과 같은 메타 태그를 설정합니다.

<meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

로그인 후 복사

관련 매개변수 설명:

장치 너비: 출력 장치의 화면에 표시되는 너비를 정의합니다. . 　

　device-height:출력 장치 화면의 가시 높이를 정의합니다.

　width = device-width: 너비는 현재 장치의 너비와 같습니다.

　Initial-scale: 초기 스케일링 비율(기본 설정은 1.0).

　minimum-scale: 사용자가 확대/축소할 수 있는 가장 작은 배율입니다(기본값은 1.0).

　maximum-scale: 사용자가 확대/축소할 수 있는 최대 비율입니다(기본 설정은 1.0).

　　user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부(기본 설정은 사용자가 페이지를 확대하거나 축소하는 것을 원하지 않기 때문에 아니요입니다).

2.호환 파일 js를 로드

호환 파일 js를 로드하는 이유는 무엇인가요?

IE8 이상의 핵심은 html5 및 CSS3 미디어와 호환되지 않기 때문입니다. 따라서 코드를 구현할 수 있으려면 두 개의 호환 가능한 파일을 로드해야 합니다.

1 <!--[if lt IE 9]>
2 <script src=" 
3      <script src=" 
4 <![endif]-->

로그인 후 복사

html5hiv.js를 다운로드하여 직접 응답할 수도 있습니다. js의 경우 사용 시 해당 스크립트에서 src 경로만 수정하면 됩니다.

3. IE의 렌더링 모드를 최고 수준으로 조정하세요. 대부분의 IE는 버전 9 이상입니다. 이 IE 버전의 문서 모드는 최신이 아니거나 많은 친구들이 이에 대해 주의를 기울이지 않았습니다. 따라서 다음 코드를 사용하여 IE의 문서 모드를 최신 상태로 유지할 수 있습니다. :

1 <meta http-equiv="X-UA-Compatible" content="IE=edge">

로그인 후 복사

두 번째 방법:

1 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

로그인 후 복사

Google 크롬 프레임과 이 Google 크롬 플러그인을 설치하세요. 이를 통해 모든 브라우저는 조판 및 계산을 위해 Webkit 엔진과 V8 엔진을 사용할 수 있습니다. 이 플러그인이 설치되어 있지 않으면 위 코드로 인해 브라우저가 가장 높은 문서 모드를 표시하게 됩니다.

CSS3 미디어의 표준 작성 방법:

예: 페이지가 960px보다 작은 경우 아래 CSS 코드를 실행합니다.

1 @media screen and (max-width: 960px){
3     body{
5         background: #000;
7      }
9 }

로그인 후 복사

이 코드에는 페이지를 인쇄할 때 장치에 세리프 글꼴을 사용하도록 지시하는 화면이 있습니다.

CSS2 미디어 사용

사실 미디어 사용을 지원하는 것은 CSS3뿐만이 아닙니다. 미디어는 CSS2부터 지원되었습니다. 구체적인 사용법은 HTML 페이지의 헤드 태그에 다음 코드를 삽입하는 것입니다. :

1 <link rel="stylesheet" type="text/css" media="screen" href="style.css">

로그인 후 복사

지금 알고 싶습니다. 모바일 기기의 디스플레이 화면이 수직으로 배치되어 있는 경우 다음과 같이 작성할 수 있습니다.

1 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

로그인 후 복사

코드의 첫 번째 단락도 CSS2로 구현되어 지정된 스타일도 실행할 수 있습니다. 페이지 너비가 960보다 작은 경우 파일:

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

로그인 후 복사

하지만 이 방법은 http 방문 횟수를 증가시킵니다. 따라서 모든 CSS를 함께 작성하려면 CSS3를 사용하는 것이 가장 좋습니다.

자, 이제 CSS3의 미디어 사용법으로 돌아가서 CSS3를 사용하여 960px보다 작은 화면 너비를 작성하는 방법에 대해 이야기해 보겠습니다.

1 @media screen and （max-width-device：960px）{
2 
3 Body{
4 
5        Background：blue；
6 
7 
}
8 
9 }

로그인 후 복사

960px 이상의 너비를 작성하는 방법:

1 @media screen and(min-width:960px){
2 
        Body{
        4 
        5               Background:red;
        6 
        7 
        }
        8 
        9 
        }

로그인 후 복사

위는 일반적으로 사용되는 몇 가지 작성 방법입니다. 다음으로 CSS3 미디어를 요약하겠습니다:

width: 브라우저에 표시되는 너비.

height: 브라우저에 표시되는 높이입니다.

device-width: 장치 화면의 너비입니다.

device-height:장치 화면의 높이입니다.

orientation: 기기가 현재 가로 방향인지 세로 방향인지 확인하세요.

aspect-ratio: 브라우저에 표시되는 너비와 높이의 비율을 감지합니다. (예: 가로세로비:16/9)

device-aspect-ratio: 장치의 너비와 높이의 비율을 감지합니다.

color: 색상을 감지하는 자릿수입니다. (예: min-color:32는 장치에 32비트 색상이 있는지 감지합니다.)

color-index: 장치 색상 인덱스 테이블의 색상을 확인하세요. 해당 값은 음수가 될 수 없습니다.

monochrome: 단색 프레임 버퍼 영역에서 픽셀당 비트 수를 감지합니다. (이것은 너무 고급이어서 거의 사용하지 않을 것 같습니다.)

해상도: 화면이나 프린터의 해상도를 감지합니다. (예: 최소 해상도:300dpi 또는 최소 해상도:118dpcm)

grid: 출력 장치가 그리드 장치인지 비트맵 장치인지 확인하세요.

마지막으로 재미있는 데모 엔딩이 있습니다:

 1 <!DOCTYPE html> 
 2 <html lang="en"> 
 3 <head> 
 4 <meta charset="utf-8" /> 
 5 <title>CSS3 media Test</title> 
 6 <meta name="author" content="LostWeapon" /> 
 7 <style> 
 8 *{ 
 9     text-align: center;
 10     font-size: 20px; 
 11 }
 12 p{
 13     font-size: 14px;
 14 }
 15 @media screen and (min-resolution: 75.5dpcm) {
 16     .normal{display:none;}
 17 }
 18 @media screen and (min-resolution: 28.3dpcm) and (max-resolution: 75.4dpcm) {
 19     .retina{display:none;}
 20 }
 21 </style>
 22 </head>
 23 <body>
 24 <p class="retina">视网膜屏</br>哎呦 不错哦，小伙子有前途！</p>
 25 <p class="normal">普通屏</br>还不快去努力学习挣钱换电脑!</br><strong>看什么看，说的就是你！</strong></p>
 26 </body>
 27 <footer>
 28     <p>
 29        Copyright &copy;2017 墨雨溪风
 30     </p>
 31 </footer>
 32 </html>

로그인 후 복사

위 내용은 CSS3의 미디어 미디어 쿼리 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!