CSS3의 미디어 미디어 쿼리
- 高洛峰원래의
- 2017-02-17 13:11:401569검색
미디어 쿼리는 반응형 웹페이지에서 주로 사용됩니다.
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입니다. 사용자가 페이지를 확대하거나 축소하는 것을 원하지 않기 때문입니다.
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 브라우저가 최상위 문서 모드에서 효과를 표시하게 됩니다.
@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 미디어 쿼리 본문 코드 조합:
예를 들어 화면 너비가 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中文网！