CSS3의 미디어 미디어 쿼리 사용에 대한 자세한 설명
최근 반응형 레이아웃의 발전으로 한 번 개발하여 여러 번 사용할 수 있는 반응형 웹사이트에 대한 수요가 늘어나고 있습니다. 하지만 웹사이트를 화면에 맞게 조정하려면 어떻게 해야 할까요? 여기서 우리는 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 ©2017 墨雨溪风
30 </p>
31 </footer>
32 </html>위 내용은 CSS3의 미디어 미디어 쿼리 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7416
15
1359
52
76
11
26
19
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
Lenovo 컴퓨터의 미디어 확인이 켜지지 않는 문제를 해결하는 방법은 무엇입니까?
Feb 12, 2024 am 08:36 AM
일부 사용자는 Lenovo 노트북을 시작할 때 미디어 검사를 시작할 수 없는 문제에 직면했는데, 이는 Lenovo 컴퓨터에서 시작되지 않는 미디어 검사 문제를 해결하는 방법입니다. 이 튜토리얼에서는 Lenovo 노트북에서 미디어가 시작되지 않는지 확인하는 이유와 해결 방법을 알려드립니다. 원인: 1. 하드 드라이브 손상: Lenovo 노트북에 하드 드라이브 손상이나 오류가 있는 경우 노트북에 미디어 확인 메시지가 표시되고 부팅되지 않습니다. 운영 체제가 손상됨: Lenovo 노트북의 운영 체제가 손상된 경우 노트북에 검사 미디어가 표시되고 부팅할 수 없습니다. 2. 컴퓨터를 다시 시작하고 F12를 눌러 BIOS로 들어간 다음 "시작" 항목을 선택합니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
CSS3 적응형 레이아웃이란 무엇입니까?
Jun 02, 2022 pm 12:05 PM
"반응형 레이아웃"이라고도 알려진 적응형 레이아웃은 화면 너비를 자동으로 인식하고 그에 따라 조정할 수 있는 웹 페이지 레이아웃을 의미합니다. 이러한 웹 페이지는 각 터미널에 대해 특정 버전을 만드는 대신 여러 다른 터미널과 호환될 수 있습니다. . 적응형 레이아웃은 모바일 웹 브라우징 문제를 해결하기 위해 탄생했으며, 다양한 단말기를 사용하는 사용자에게 좋은 사용자 경험을 제공할 수 있습니다.
