Explication détaillée des requêtes multimédias Media en CSS

En matière de responsive design, les médias de requête multimédia sont définitivement indissociables. Il est généralement admis que les requêtes multimédias sont de nouveaux ajouts à CSS3. En fait, CSS2 existe déjà et CSS3 ajoute de nouveaux attributs multimédias et scénarios d'utilisation (non pris en charge par le navigateur IE8). Cet article explique en détail ce qu'est une requête média.

(Tutoriel recommandé : Tutoriel CSS)

Type de média

En CSS2, le média La requête n'est utilisée que dans les balises

L'attribut media est utilisé pour spécifier différents styles pour différents types de médias

screen Écran d'ordinateur (par défaut)
Lecteur électrique TTY et support similaire avec grille de caractères larges équivalente
TV Équipement de type TV (basse résolution, capacité de déroulement de l'écran limitée)
Projet
Support de support portable Appareils ( petit écran, bande passante limitée)
imprimer Mode aperçu avant impression / page d'impression
braille Dispositif de retour en braille pour les aveugles
Audio Synthétiseur vocal
tous Convient à tous les appareils

Les types de médias les plus largement utilisés et compatibles avec tous les navigateurs sont « écran » et « tous »

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

attributs multimédias

Media Les attributs sont un nouveau contenu dans CSS3. La plupart des attributs multimédias sont préfixés par "min-" et "max-", qui sont utilisés pour exprimer "inférieur ou égal à" et "supérieur ou égal à". Cela évite l'utilisation de caractères "" qui entrent en conflit avec HTML et XML.

[Remarque] Les attributs multimédias doivent être mis entre parenthèses (), sinon ils seront invalides.

Toutes les propriétés des médias sont répertoriées dans le tableau suivant :

largeur | min-width | max-width

hauteur min | 🎜>

largeur de l'appareil | largeur-min de l'appareil | largeur-de l'appareil max

hauteur de l'appareil | hauteur-de l'appareil max

rapport d'aspect | min-aspect-ratio | max-aspect-ratio

device-aspect-ratio | min-device-aspect-ratio | | max-color

color-index | min-color-index | max-color-index

min-monochrome |max-monochrome

résolution min - résolution | résolution maximale

scan | grille

[1] Couleur (couleur)

Spécifiez chaque unité de pixel du périphérique de sortie valeur en bits. Si l'appareil ne prend pas en charge la couleur de sortie, la valeur est 0

Appliquer la feuille de style à tous les appareils pouvant afficher la couleur

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

【2】Index de couleur (color-index)

L'index des couleurs spécifie le nombre d'entrées dans la table de recherche de couleurs dans le périphérique de sortie, ou une valeur égale à 0 si aucune table de recherche de couleurs n'est utilisée.

S'applique à tous les appareils utilisant au moins 256 couleurs indexées Feuille de style (le code suivant n'est pas affiché, indiquant que la valeur de retour est 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)

Le rapport hauteur/largeur décrit la sortie. Le rapport hauteur/largeur de la zone d'affichage cible de l'appareil. La valeur est constituée de deux entiers positifs séparés par "/". Représente le rapport entre le nombre de pixels horizontaux (la première valeur) et le nombre de pixels verticaux (la deuxième valeur).

Appliquer des feuilles de style aux appareils dont la zone de visualisation est carrée ou grand écran

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

[4] rapport d'aspect de l'appareil (device-aspect-ratio)

Le rapport hauteur/largeur du périphérique décrit le rapport hauteur/largeur du périphérique de sortie. La valeur est constituée de deux entiers positifs séparés par "/". Représente le rapport entre le nombre de pixels horizontaux (la première valeur) et le nombre de pixels verticaux (la deuxième valeur).

Appliquer la feuille de style aux appareils à écran large spéciaux avec un rapport hauteur/largeur de 16:9

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

[5] hauteur de l'appareil

La hauteur de l'appareil décrit la hauteur du périphérique de sortie

Appliquer une feuille de style à un document affiché sur un écran d'une hauteur minimale de 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)

La largeur du périphérique décrit la largeur du périphérique de sortie

Appliquer une feuille de style à un document affiché sur un écran avec une largeur minimale de 1000px

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

[ 7] Grid (grid)

Grid détermine si le périphérique de sortie est un périphérique grille ou un périphérique bitmap. Cette valeur est 1 si l'appareil est basé sur une grille (comme un terminal de télétype ou un téléphone qui ne peut afficher qu'un seul glyphe), 0 sinon.

Appliquer des feuilles de style aux appareils hors grille

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

[8] Hauteur

La hauteur décrit la zone de rendu du périphérique de sortie (si possible La hauteur de la zone de la fenêtre d'affichage ou la hauteur du bac de l'imprimante)

Appliquer la feuille de style aux appareils dont la hauteur de la fenêtre d'affichage est supérieure à 800 pixels

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

[9] Largeur (largeur)

La largeur décrit la largeur de la zone de rendu du périphérique de sortie

Appliquer la feuille de style aux appareils d'une largeur supérieure à 800px dans la zone visible

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

【10】Noir et blanc (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操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!