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

집

웹 프론트엔드

CSS 튜토리얼

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

黄舟

Sep 01, 2017 pm 03:06 PM

css3media

최근 반응형 레이아웃의 발전으로 한 번 개발하여 여러 번 사용할 수 있는 반응형 웹사이트에 대한 수요가 늘어나고 있습니다. 하지만 웹사이트를 화면에 맞게 조정하려면 어떻게 해야 할까요? 여기서 우리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.