CSS의 미디어 미디어 쿼리에 대한 자세한 설명

반응형 디자인에 있어서 미디어 쿼리 미디어는 확실히 떼어놓을 수 없습니다. 일반적으로 미디어 쿼리는 CSS3에 새로 추가된 것으로 간주됩니다. 실제로 CSS2는 이미 존재하며 CSS3에는 새로운 미디어 속성과 사용 시나리오가 추가됩니다(IE8 브라우저에서는 지원되지 않음). 이 글에서는 미디어 쿼리가 무엇인지 자세히 설명합니다.

(추천 튜토리얼: CSS 튜토리얼)

미디어 유형

CSS2에서 미디어 쿼리는

screen 컴퓨터 화면(기본값)

tty 고정 폭 문자 격자를 사용하는 텔레타프라이터 및 유사 미디어

tv TV 유형 장치(저해상도, 제한된 화면 스크롤 기능)
프로젝션
휴대용
휴대용(작은 화면, 제한된 대역폭)
인쇄 인쇄 미리보기 모드/페이지 인쇄
시각 장애인을 위한 점자 피드백 장치
청각
청각 음성 합성기
all 모든 장치에 적합

매우 널리 사용되는 미디어 유형 모든 브라우저와 호환되는 것은 'screen' 및 'all'입니다

<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}    
</style>
<div class="box"></div>

Media 속성

Media 속성은 CSS3의 새로운 콘텐츠이며 대부분의 미디어 속성에는 표현에 사용되는 "min-" 및 "max-" 접두사가 있습니다. "작거나 같음" 및 "크거나 같음". 이렇게 하면 HTML 및 XML과 충돌하는 "" 문자를 사용할 수 없습니다.

[참고] 미디어 속성은 대괄호()로 묶어야 합니다. 그렇지 않으면 유효하지 않습니다.

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

최소 너비 | 최대 너비

높이 | 최소 높이

장치 너비 | -width

장치 높이 | 최대 장치 높이

종횡비 | 최대 종횡비

장치 종횡비 - 비율 | 최대 장치 종횡비

색상 | 최대 색상색상

색상 지수 | 최대 색상 지수

단색 최대값 | 최소 해상도 | 최대 해상도

scan | 그리드

【1】Color(색상)

출력 장치의 각 픽셀 단위의 비트 값을 지정합니다. 기기가 출력 색상을 지원하지 않는 경우 값은 0

색상을 표시할 수 있는 모든 기기에 스타일시트 적용

<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 】Aspect-ratio(aspect-ratio)

aspect ratio는 출력 장치의 대상 디스플레이 영역의 화면 비율을 나타냅니다. 값은 "/"로 구분된 두 개의 양의 정수로 구성됩니다. 가로 픽셀 수(첫 번째 값)와 세로 픽셀 수(두 번째 값)의 비율을 나타냅니다.

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

<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

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

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

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

<style>
@media (min-device-width: 1000px) {
    .box{ height: 100px; width: 100px;background-color: lightblue; }        
}
</style>
<div class="box"></div>

【7】Grid

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

그리드가 아닌 장치에 스타일 시트 적용

<style>
@media (grid:0) {
    .box{height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

[8] 높이(높이)

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

시각적 영역 높이가 800px 이상인 장치에 스타일 시트 적용

<style>
@media (min-height:800px) {
    .box{ height: 100px; width: 100px;background-color: lightgreen; }        
}
</style>
<div class="box"></div>

[9] 너비(width)

Width는 출력 장치의 렌더링 영역 너비를 나타냅니다

적용 너비가 800px보다 큰 시각적 영역을 가진 장치에 스타일 시트를 적용

<style>
@media (min-width:800px) {
    .box{ height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【10】흑백(단색)

黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为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操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="only"，因为没有一个叫only的设备，所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

所以，在使用媒体查询时，only最好不要忽略

方法

window.matchMedia()方法用来检查CSS的mediaQuery语句

[注意]IE9-浏览器不支持，可以使用第三方函数库matchMedia.js

属性

window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有media和matches两个属性。

media：返回所查询的mediaQuery语句字符串

matches：返回一个布尔值，表示当前环境是否匹配查询语句

var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

可以根据matchMedia()方法的matches属性的不同结果，进行对应的设置

var result = window.matchMedia('(min-width: 600px)');
if (result.matches) {
  //
}else{
 //
}

[注意]如果window.matchMedia无法解析mediaQuery参数，matches属性返回的总是false，而不是报错

var result = window.matchMedia('123');
console.log(result.matches);//false

事件

window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法

// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);

注意，只有mediaQuery查询结果发生变化时，才调用指定的回调函数

所以，如果想要mediaQuery查询未变化时，就显示相应效果，需要提前调用一次函数

下面这个例子是当页面宽度小于1000px时，页面背景颜色为品红色；否则为淡蓝色

var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
  if (mql.matches) {
    document.body.background = 'pink';
  }else{
      document.body.background = 'lightblue';
  }
}

打印样式

媒体查询的一个常用功能是打印样式的设置，主要是背景清除、字体颜色变黑等

@media print{
    *,*:before,*:after{
        background:transparent!important;
        color:#000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,a:visited{
        text-decoration: underline;
    }
    a[href]:after{
        content:"(" attr(href) ")";
    }
    abbr[title]:after{
        content:"(" attr(title) ")";
    }
    a[href^="#"]:after,a[href^="javascript:;"]:after{
        content:"";
    }
    pre,blockquote{
        border: 1px solid #999;
        /*只有opera浏览器起作用，避免在元素内部插入分页符*/
        page-break-inside:avoid;
    }
    thead{
        display:table-header-group;
    }
    tr,img{
        page-break-inside:avoid;
    }
    img{
        max-width:100%!important;
    }
    p,h2,h3{
        /*元素内部发生分页时，最少保留3行*/
        orphans:3;
        /*元素内部发生分页时，元素顶部最少保留3行*/
        windows:3;
    }
    h2,h3{
        /*避免在元素后面插入一个分页符*/
        page-break-after:avoid;
    }
}

相对单位

如果媒体查询@media使用的是相对单位，如rem，这里有一个坑需要着重强调一下。

一般而言，rem是相对于HTML的字体大小的。但是，由于媒体查询的级别非常高，它并不是HTML的子元素，不是相对于HTML，而是相对于浏览器的，而浏览器的默认字体大小是16px。

如果HTML设置字体大小为12px，设置如下媒体查询：

media="only screen and (max-width:1rem)"

实际上，max-width等于16px，而不是12px

而正是由于媒体查询是相对于浏览器的， 所以使用rem就没有必要，完全可以使用em来替代

media="only screen and (max-width:1em)"

更多编程相关知识，请访问：编程入门！！

위 내용은 CSS의 미디어 미디어 쿼리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!