CSS 미디어 미디어 쿼리에 대한 심층적인 이해-HTML 튜토리얼-php.cn

× 목차 [1]미디어 유형 [2]미디어 속성 [3]구문 이전 단어 반응형 디자인에 있어서 미디어 쿼리 미디어는 확실히 뗄래야 뗄 수 없는 관계입니다. 일반적으로 미디어 쿼리는 CSS3에 새로 추가된 것으로 간주됩니다. 실제로 CSS2는 이미 존재하며 CSS3에는 새로운 미디어 속성과 사용 시나리오가 추가됩니다(IE8 브라우저에서는 지원되지 않음). 이번 글에서는 미디어 문의 내용을 자세하게 소개하겠습니다

미디어 유형 CSS2에서 미디어 쿼리는 및 태그에만 사용되며 미디어 속성으로 존재합니다.

미디어 속성은 다양한 미디어 유형에 대해 다양한 스타일을 지정하는 데 사용됩니다.

screen 计算机屏幕（默认值） tty 电传打字机以及使用等宽字符网格的类似媒介 tv 电视类型设备（低分辨率、有限的屏幕翻滚能力） projection 放映机 handheld 手持设备（小屏幕、有限的带宽） print 打印预览模式 / 打印页 braille 盲人用点字法反馈设备 aural 语音合成器 all 适合所有设备 로그인 후 복사 모든 브라우저와 호환되며 실제로 널리 사용되는 미디어 유형은 'screen'과 'all'입니다.

style media ="screen" > .box { height : 100px ; width : 100px ; background-color : lightblue ; } style > div class ="box" > div > 로그인 후 복사

미디어 속성 미디어 속성은 CSS3에 새로 추가된 것입니다. 대부분의 미디어 속성에는 "작거나 같음" 및 "크거나 같음"을 표현하는 데 사용되는 "min-" 및 "max-" 접두사가 붙습니다. 이렇게 하면 HTML 및 XML과 충돌하는 " " 문자를 사용하지 않아도 됩니다. [참고] 미디어 속성은 대괄호()로 묶어야 합니다. 그렇지 않으면 유효하지 않습니다.

모든 미디어 속성은 아래 표에 나열되어 있습니다

색상 표시가 가능한 모든 기기에 스타일 시트를 적용합니다

style > @media (color) { .box{height : 100px ; width : 100px ; background-color : lightblue ; } } style > div class ="box" > div > 로그인 후 복사 【2】색상지수(color-index)

색상 인덱스는 출력 장치의 색상 조회 테이블에 있는 항목 수를 지정합니다. 색상 조회 테이블을 사용하지 않는 경우 값은 0입니다.

256개 이상의 인덱스 색상을 사용하는 모든 장치에 스타일 시트를 적용합니다. (다음 코드는 표시되지 않아 반환 값이 0임을 나타냅니다.)

style > @media (min-color-index: 256) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사 【3】가로세로 비율 종횡비는 출력 장치의 대상 표시 영역의 종횡비를 나타냅니다. 값은 "/"로 구분된 두 개의 양의 정수로 구성됩니다. 가로 픽셀 수(첫 번째 값)와 세로 픽셀 수(두 번째 값)의 비율을 나타냅니다.

보기 영역이 정사각형 또는 와이드스크린인 기기에 스타일 시트 적용

style > @media (min-aspect-ratio: 1/1) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사 【4】기기 종횡비(device-aspect-ratio)

장치 종횡비는 출력 장치의 종횡비를 나타냅니다. 값은 "/"로 구분된 두 개의 양의 정수로 구성됩니다. 가로 픽셀 수(첫 번째 값)와 세로 픽셀 수(두 번째 값)의 비율을 나타냅니다.

가로세로 비율이 16:9인 특수 와이드스크린 장치에 스타일시트 적용

style > @media (device-aspect-ratio:16/9) { .box{ height : 100px ; width : 100px ; background-color : pink ; } } style > div class ="box" > div > 로그인 후 복사 【5】기기 높이(device-height)

장치 높이는 출력 장치의 높이를 나타냅니다.

화면에 표시되는 최소 높이 1000px 이상의 문서에 스타일시트를 적용합니다

style > @media (min-device-height: 1000px) { .box{ height : 100px ; width : 100px ; background-color : pink ; } } style > div class ="box" > div > 로그인 후 복사 【6】장치 너비(device-width)

장치 너비는 출력 장치의 너비를 나타냅니다.

화면에 표시되는 최소 너비 1000px 이상의 문서에 스타일 시트를 적용합니다

style > @media (min-device-width: 1000px) { .box{ height : 100px ; width : 100px ; background-color : lightblue ; } } style > div class ="box" > div > 로그인 후 복사 【7】그리드

그리드는 출력 장치가 그리드 장치인지 비트맵 장치인지를 결정합니다. 장치가 그리드 기반인 경우(예: 텔레타이프 터미널 또는 하나의 문자만 표시할 수 있는 전화기) 값은 1이고, 그렇지 않은 경우 0

비 그리드 장치에 스타일 시트 적용

style > @media (grid:0) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사 【8】키

높이는 출력 장치의 렌더링 영역 높이를 나타냅니다(예: 시각적 영역 높이 또는 프린터 트레이 높이)

가시 영역의 높이가 800px 이상인 기기에 스타일시트 적용

【9】宽度（width）

宽度描述了输出设备渲染区域的宽度

向宽度大于800px的可视区域的设备应用样式表

style > @media (min-width:800px) { .box{ height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사 【10】黑白（monochrome）

黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0

向非黑白设备应用样式表

style > @media (monochrome:0) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사

【11】方向（orientation）

方向指定了设备处于横屏（宽度大于宽度）模式还是竖屏（高度大于宽度）模式

值：landscape(横屏) | portrait(竖屏)

向竖屏设备应用样式表

style > @media (orientation: portrait) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사 【12】分辨率（resolution）

分辨率指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示

[注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此

向每英寸至少90点的设备应用样式

style > @media (min-resolution: 90dpi) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 로그인 후 복사

【13】扫描（scan）

扫描描述了电视输出设备的扫描过程

值： progressive | interlace

语法 媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假

当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）

link rel ="stylesheet" href ="style.css" media ="print" >

div class ="box" > div > 로그인 후 복사 media并不是'print'，所以媒体查询为假。但是，style.css文件依然被下载

逻辑操作符 操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

and

and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真

[注意]在不使用not或only操作符的情况下，媒体类型是可选的，默认为all

满足横屏以及最小宽度为700px的条件应用样式表

@media all and (min-width: 700px) and (orientation: landscape) { ... } 로그인 후 복사 由于不使用not或only操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为

@media (min-width: 700px) and (orientation: landscape) { ... } 로그인 후 복사 or

将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真，相当于or操作符

满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... } 로그인 후 복사 not

not操作符用来对一条媒体查询的结果进行取反

[注意]not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询

@media not all and (monochrome) { ... } //等价于 @media not (all and (monochrome)) { ... } 로그인 후 복사 only

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

[注意]经测试，无论是否使用only操作符都对结果无影响

style media ="only screen and (max-width:1000px)" > .box { width : 100px ; height : 100px ; background-color : pink ; } style > div class ="box" > div > 로그인 후 복사 实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用

// <![CDATA[ var all = document.getElementById('cnblogs_post_body').children; var select = [];

for(var i = 1; i < all.length; i++){ if(all[i].getAttribute('id')){ if(all[i].getAttribute('id').match(/anchor\d+$/)){ select.push(all[i]); } }

} var wheel = function(e){ e = e || event; var data; if(e.wheelDelta){ data = e.wheelDelta; }else{ data = -e.detail * 40; } for(var i = 0; i 0){ return; } if(select[i].getBoundingClientRect().top 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }

} document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false);

} oCon.children[i].onclick = function(){ change(this); } }

function change(_this){ for(var i = 2; i