CSS3의 미디어 미디어 쿼리

미디어 쿼리는 반응형 웹페이지에서 주로 사용됩니다.

1. 초기화 설정:

HTML 파일에서 웹페이지 상단의 태그에 문장을 삽입합니다.

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

이 문장은 주로 다음을 포함하여 반응형 웹 페이지에 대한 초기화 설정을 합니다.

name="viewport": 디스플레이 장치를 뷰포트로 표시

width = device; -width: 너비는 현재 장치와 동일합니다. 너비: 사용자가 확대/축소할 수 있는 최대 비율(기본 설정은 1.0)

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

2. IE 브라우저의 호환성 문제 해결:

IE 브라우저(IE8)는 HTML5, CSS3의 미디어를 지원하지 않으므로 JS를 로드합니다. IE 브라우저 호환성 문제를 해결하기 위해 사용된 파일:

<!--[if lt IE 9]>

	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

두 개의 <script></script> 태그에서 src 속성이 가리키는 파일 링크 주소는 고정된 주소에 있는 파일입니다. 오프사이트에 직접 있으므로 로컬 참조로 다운로드할 필요가 없습니다.

3. IE의 렌더링 모드를 최고로 설정하세요:

이제 많은 사람들의 IE 브라우저가 IE9 이상으로 업그레이드됩니다. 현재 IE9 브라우저이지만 브라우저의 문서 모드는 IE8입니다. 이러한 상황을 방지하려면 IE의 문서 모드를 항상 최신 상태로 유지하기 위해 다음 코드가 필요합니다.

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

물론 더 강력한 작성 방법이 있습니다:

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

이 코드 뒤에 chrome=1이 추가됩니다. 이는 Google Chrome 프레임(Google 임베디드) 때문입니다. 브라우징) 브라우저 프레임워크 GCF), 사용자의 컴퓨터에 이 크롬 플러그인을 설치하면 컴퓨터의 IE 브라우저는 버전 요소를 피하고 조판 및 계산을 위해 Webkit 엔진과 V8 엔진을 사용할 수 있습니다. 물론 사용자가 이 플러그인을 설치하지 않으면 이 코드로 인해 IE 브라우저가 최상위 문서 모드에서 효과를 표시하게 됩니다.

4. CSS3 미디어 미디어 쿼리는 다음과 같이 작성됩니다.

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

이것은 CSS 파일에서 미디어를 작성하는 표준 방법입니다. 의미: 페이지가 960px보다 작은 경우 다음 CSS 코드가 실행되고 특정 내용은 당분간 무시됩니다.

위 코드의 screen은 페이지를 인쇄할 때 serif 글꼴을 사용하고 화면에 표시할 때 sans-serif 글꼴을 사용하도록 장치에 지시하는 것을 의미합니다. 현재 많은 웹사이트에서는 화면을 직접 생략하고 있기 때문에 사용자가 웹페이지를 인쇄해야 하는 필요성을 고려할 필요가 없기 때문에 다른 작성 방법이 있습니다:

@media (max-width: 960px){
	body{
		background: #000;
	}
}

저는 엄밀한 사고의 원칙에 따라 개인적으로 이런 글쓰기 방식을 사용하지 마세요.

5. CSS3 미디어 쿼리 본문 코드 조합:

반응형 웹 페이지 레이아웃에서는 미디어 쿼리 코드 조합을 지속적으로 사용해야 합니다. 조정된 화면의 너비를 조정하고 다양한 너비 조건에 따라 다양한 CSS 스타일을 적용합니다.

예를 들어 화면 너비가 960px인 경우 웹페이지의 배경색을 빨간색으로 변경합니다.

@media screen and (max-device-width:960px){
	body{
		background:red;
	}
}

예를 들어 화면 너비가 최대 960px(960px 미만)인 경우 웹페이지의 배경색을 검은색으로 변경합니다.

@media screen and (max-width: 960px){
	body{
		background: #000;
	}
}

예를 들어 최소 화면 너비가 960px(960px보다 큼)인 경우 배경색을 다음과 같이 변경합니다. 웹 페이지를 주황색으로 변경:

@media screen and (min-width:960px){
	body{
		background:orange;
	}
}

더 일반적인 방법은 화면 너비가 960px에서 1200px 사이일 때 웹 페이지의 배경색을 노란색으로 변경하는 등 혼합 사용됩니다.

@media screen and (min-width:960px) and (max-width:1200px){
	body{
		background:yellow;
	}
}

6. 전반적인 개발 아이디어:

CSS3에서 미디어 사용 쿼리의 일반적인 아이디어는 다양한 장치에서 웹 페이지의 너비 범위를 결정하는 것입니다. 범위에는 세 가지 유형이 있을 수 있습니다(PC, 태블릿, 휴대폰) 또는 4가지 유형(PC, 태블릿, 중대형 휴대폰, 소형 화면 휴대폰)이 있을 수도 있고, 물론 두 가지 유형(태블릿, 휴대폰, PC)만 필요한 것도 가능합니다. CSS3 미디어 쿼리의 객체로 사용되지 않고 별도의 버전을 개발할 수 있으며, 다양한 장치에 적응할 수 있도록 다양한 너비 범위의 필수 페이지 요소에 서로 다른 CSS 스타일을 적용합니다.

7. 반응형 웹 개발 시 너비 문제:

실제 개발에서는 일반적으로 반응형 웹 페이지의 최대 너비를 설정해야 합니다. 최대 너비를 무시하면 웹 페이지가 나타납니다. 레이아웃이 부풀어 오르거나 조각화되어 시각적 홍수가 발생합니다. 이는 우리가 종종 낮게 보인다고 말하는 것입니다.

또한 현재 디스플레이 장치의 웹 페이지 너비에 대해 이야기하겠습니다(공간 문제로 인해 산업 혁명으로 시작하지는 않겠습니다). 현재 가장 일반적인 너비는 기본적으로 PC 쪽(1920px, 1600px)입니다. ) 960px, 1440px, 1280px, 1140px, 960px 이상), 960px~640px 사이의 태블릿(768px, 640px), 640px 이하의 휴대폰(480px, 320px)은 오랫동안 존재해 왔으며, 디스플레이 장치의 웹 페이지 너비는 오랫동안 유지됩니다. 이 상태에서는 반응형 웹 페이지 너비 디자인에 있어서 기본적으로 이러한 크기를 고려하면 충분합니다.

8. 미디어 미디어 쿼리의 모든 매개변수 요약:

미디어 쿼리에는 아래와 같이 일반적으로 사용되지 않는 관련 기능도 포함됩니다.

width : 브라우저 표시 너비,

• height: 브라우저 표시 높이,

• device-width: 장치 화면 너비,

• device-height: 장치 화면의 높이,

• orientation: 장치가 현재 가로 모드인지 세로 모드인지 감지,

• aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:检测设备的宽度和高度的比例，

• color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

• color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

• monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

• resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：检测输出的设备是网格的还是位图设备。

9.扩展——在CSS2中同样有媒体查询：

media媒体查询并不是CSS3诞生之后的专用功能，早在CSS2开始就已经支持media，比如：

在HTML文件中的标签中写入这句：

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

以上是CSS2实现的衬线用法，href属性中写入在某单一显示设备中链接的CSS文件，但仅供入门，

如要判断移动设备是否为纵向放置的显示屏，可以这样写：

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

如要让小于960px的页面执行指定的CSS样式文件，可以这样写：

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

当然，CSS2中的媒体查询方法放到现在并不推荐使用，最大的弊端在于这样会增加页面http的请求次数，增加页面负担，使用CSS3中的媒体查询才是目前的最佳方法。

更多CSS3中的media媒体查询相关文章请关注PHP中文网！