Ausführliche Erläuterung der Medienabfragen in CSS

Wenn es um responsives Design geht, sind Medienabfragemedien definitiv untrennbar miteinander verbunden. Es wird allgemein angenommen, dass Medienabfragen neue Ergänzungen zu CSS3 sind. Tatsächlich existiert CSS2 bereits und CSS3 fügt neue Medienattribute und Verwendungsszenarien hinzu (wird vom IE8-Browser nicht unterstützt). In diesem Artikel wird ausführlich erläutert, was eine Medienabfrage ist.

(Empfohlenes Tutorial: CSS-Tutorial)

Medientyp

In CSS2 werden Medienabfragen nur in

Medienattribute Wird verwendet, um unterschiedliche Stile für unterschiedliche Medientypen anzugeben

Bildschirm Computerbildschirme (Standard)
TTY-Fernschreibmaschinen und ähnliche Medien mit einem Zeichenraster mit fester Breite
Fernseher TV-Geräte (niedrige Auflösung, eingeschränkte Möglichkeiten zum Scrollen des Bildschirms)
Projektion
Handheld
Handgerät (kleiner Bildschirm, begrenzte Bandbreite)
Druckvorschaumodus/Druckseite
Braille-Feedbackgerät für Blinde
aural
auraler Sprachsynthesizer

alles für alle Geräte geeignet

Wirklich weit verbreitet Und die Medientypen, die kompatibel sind Bei allen Browsern handelt es sich um „Bildschirm“ und „Alle“. kleiner oder gleich“ und „größer oder gleich“. Dadurch wird die Verwendung von „“-Zeichen vermieden, die mit HTML und XML in Konflikt stehen. [Hinweis] Medienattribute müssen in Klammern () eingeschlossen werden, sonst sind sie ungültig. Alle Medieneigenschaften sind in der Tabelle unten aufgeführt:

max-width |. min-device-width | -width

device-height |. max-device-height

aspect-ratio |. max-color-index |. max-color-index |. max-color-index | Auflösung |. Max-Auflösung

Raster

【1】Farbe (Farbe)

Gibt den Bitwert jeder Pixeleinheit des Ausgabegeräts an. Wenn das Gerät keine Ausgabefarbe unterstützt, ist der Wert 0

Wenden Sie das Stylesheet auf alle Geräte an, die Farbe anzeigen können

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

【2】Farbindex (Farbindex)

Der Farbindex gibt die Farbabfrage an im Ausgabegerät Die Anzahl der Einträge in der Tabelle. Wenn keine Farbsuchtabelle verwendet wird, ist der Wert gleich 0

Wenden Sie das Stylesheet auf alle Geräte an, die mindestens 256 indizierte Farben verwenden (der folgende Code wird nicht angezeigt, Dies zeigt an, dass der Rückgabewert 0 ist. Der Wert besteht aus zwei positiven Ganzzahlen, getrennt durch „/“. Stellt das Verhältnis der Anzahl horizontaler Pixel (erster Wert) zur Anzahl vertikaler Pixel (zweiter Wert) dar.

Stylesheets auf Geräte anwenden, deren sichtbarer Bereich quadratisch oder im Breitbildformat ist

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

【4】Geräte-Seitenverhältnis (device-aspect-ratio)

Geräte-Seitenverhältnis beschreibt das Seitenverhältnis des Ausgabegeräts. Der Wert besteht aus zwei positiven Ganzzahlen, getrennt durch „/“. Stellt das Verhältnis der Anzahl horizontaler Pixel (erster Wert) zur Anzahl vertikaler Pixel (zweiter Wert) dar.

Wenden Sie das Stylesheet auf spezielle Breitbildgeräte mit einem Seitenverhältnis von 16:9 an.

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

【5】Gerätehöhe

Gerätehöhe beschreibt die Höhe des Ausgabegeräts.

Zur Anzeige bei einer Mindesthöhe von 1000px Wenden Sie ein Stylesheet auf ein Dokument an, das auf einem Bildschirm angezeigt wird Mindestbreite von 1000 Pixel.

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

【7】Grid

Grid bestimmt, ob das Ausgabegerät ein Rastergerät oder ein Bitmap-Gerät ist. Dieser Wert ist 1, wenn das Gerät gitterbasiert ist (z. B. ein Fernschreibterminal oder ein Telefon, das nur eine Glyphe anzeigen kann), andernfalls 0.

Stylesheets auf Geräte ohne Raster anwenden

<style>
@media (device-aspect-ratio:16/9) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>

[8] Höhe (Höhe)

Height beschreibt die Höhe des Ausgabebereichs des Ausgabegeräts (z. B. die Höhe des visuellen Bereichs oder die Höhe des Druckerfachs). )

in Richtung Wenden Sie das Stylesheet auf Geräte mit einem visuellen Bereich an, der größer als 800 Pixel ist Stylesheets für Geräte mit einem visuellen Bereich mit einer Breite von mehr als 800 Pixel

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

【10】Schwarz und Weiß (monochrom)

黑白指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为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)"

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Medienabfragen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!