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)

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">

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

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

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

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

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

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

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

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

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

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

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

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

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中文网！