Introduction détaillée des requêtes multimédias CSS3 pour une mise en page réactive

Utilisez notre CSS3 pour implémenter une mise en page réactive

Il ne suffit pas d'avoir une boîte flexible
CSS3 étend également l'attribut media, en ajoutant Une fonction de module
Media QueriesMedia QueriesFonction

Media Queries est introduite

Avec la popularité rapide des terminaux mobiles
de plus en plus d'utilisateurs utilisent des smartphones, tablettes, etc.
Le tout en tenant compte des besoins des utilisateurs
Nous devons nous assurer que les utilisateurs ont une bonne expérience de navigation sur la page sur différents appareils
De cette façon, nous avons besoin de requêtes multimédias
Cela nous permet de Différents appareils ou appareils avec des conditions différentes ont des styles différents
Cependant, si le terminal mobile a des besoins très importants
il est préférable de développer une page spéciale pour le terminal mobile
Jetons un coup d'œil à l'introduction des requêtes multimédias Méthode

La requête Media charge sélectivement les fichiers

Tout d'abord, jetons un coup d'œil à la méthode link
Voici comment cela se fait en CSS2
Utilisez la balise link et l'attribut media pour introduire feuilles de style différentes (Si les conditions sont remplies)

<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />

Deux concepts sont introduits ici
L'un est Type de média (Type de média), et l'écran ici
Un est Media Characteristics (Media Query), la largeur maximale ici : 600px

Media Query est une version améliorée du Media Type de CSS3
En fait, Media Query peut être considéré comme Media Type (condition de jugement) + CSS (conformité Règles de style conditionnelles)

La traduction de ce code est
Si le support média est un type d'écran et que la largeur de la fenêtre est ≤ 600px, introduisez le style demo.css fichier

La requête multimédia est facultativement ajoutée Style

Ce que nous faisons dans CSS3 est d'utiliser les règles @media pour ajouter différents styles dans les fichiers CSS
Par rapport au lien, cela peut réduire les demandes de page et a de meilleurs résultats

@media screen and (max-width: 600px) {    .demo1 {        ......
    }
    .demo2 {
        ......
    }
}

Introduction d'autres requêtes média

Il existe de très nombreuses requêtes média, nous n'avons pas besoin d'en savoir beaucoup
Les deux seules requêtes couramment utilisées sont ce qui précède
@import peut également utiliser des requêtes multimédias

@import url(demo.css) screen;

Utilisations des requêtes multimédias

Si nous voulons spécifier plusieurs propriétés multimédias
, utilisez simplement le mot-clé et
La spécification de la partie propriétés du média doit utiliser des crochets

media="screen and (min-width: 601px) and (max-width: 800px)"

Le style est appliqué dans les écrans de 601 px entre ~ 800 px

---

la requête média n'a pas ni ne spécifie de fonctionnalité multimédia alternative, mais nous pouvons utiliser des styles de liste séparés par des virgules

media="screen and (min-width: 601px), print and (min-width: 6in)"

à appliquer sur des écrans 601px+ ou utiliser au moins 6 équipements d'impression pour du papier d'une largeur d'un pouce

---

Les requêtes multimédias peuvent spécifier des conditions négatives
Nous devons utiliser le mot-clé pas au début de la déclaration aux médias
Notez qu'il ne peut pas être déclaré séparément avant une seule condition, cela n'annulera pas l'intégralité de la déclaration aux médias

media="not screen and (min-width: 600px) and (max-width: 800px)"

Le style est appliqué aux écrans qui ne sont pas compris entre 600px et 800px

---

En plus du mot-clé not, il existe également un seul
qui utilise Pour masquer les requêtes multimédias des premiers navigateurs
est similaire à non et doit être déclaré au début de la déclaration de déclaration des médias
telle que cette déclaration

media="screen and (min-width: 601px) and (max-width: 800px)"

Les premiers navigateurs ne peuvent la mettre que comme media="screen"
Puisqu'il ne comprend pas les propriétés des médias , il appliquera des règles de style à tous les appareils à écran
mais en utilisant le seul mot-clé

media="only screen and (min-width: 601px) and (max-width: 800px)"

les navigateurs antérieurs le comprendront Pour media="only"
mais le seul type de média n'existe pas, donc il n'appliquera aucun style
Implémentation de la fonction de masquage des requêtes multimédias des navigateurs précédents

Types de médias et propriétés des médias

Type de média

Bien qu'il existe de nombreux mots-clés pour les médias tapez, la plupart d'entre eux ont été abandonnés (qui les utilise)
Les plus couramment utilisés sont tous, sérigraphiés et imprimés

Type de média

Description

tous

Tous les appareils multimédias

écran

Écran couleur : ordinateurs, tablettes, smartphones...

imprimer

Imprimante, aperçu avant impression

parole

Périphérique utilisé : lecteur d'écran.

audio

. td>

(obsolète) voix et Audio

媒体类型	描述
all	所有媒体设备
screen	彩色屏幕： 电脑、平板、智能机..
print	打印机、打印预览
speech	发生设备：屏幕阅读器..
aural	（已废弃）语音和音频合成器
braille	（已废弃）用盲人用点字法触觉回馈设备
embossed	（已废弃）分页的盲人用点字法打印机
handheld	（已废弃）便携设备：小型电话..
projection	（已废弃）投影设备：幻灯片..
tty	（已废弃）使用固定密度字母栅格的媒体：电传打字机和终端..
tv	（已废弃）电视机类型设备：电视、网络电视..

synthétiseur

braille

(obsolète) Dispositif de retour tactile en braille pour les aveugles

gaufré

(obsolète)Imprimante braille avec pagination

ordinateur de poche

(obsolète) Appareil portable : petit téléphone..

projection

(obsolète) Appareil de projection : diapositive..

tty

(obsolète) Médias utilisant une grille de lettres à densité fixe : téléscripteurs et terminaux..

tv

(obsolète) Types de téléviseurs Équipements : TV, TV Internet...

Fonctionnalités multimédias

Il existe de nombreuses fonctionnalités multimédias, et beaucoup d'entre elles ne sont pas utilisées

媒体类型	描述
aspect-ratio	输出设备中的页面可见区域宽度与高度的比率
color	输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	输出设备的屏幕可见宽度与高度的比率
device-height	输出设备的屏幕可见高度
device-width	输出设备的屏幕可见宽度
grid	查询输出设备是否使用栅格或点阵
height	输出设备中的页面可见区域高度
max-aspect-ratio	输出设备的屏幕可见宽度与高度的最大比率
max-color	输出设备每一组彩色原件的最大个数
max-color-index	输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio	输出设备的屏幕可见宽度与高度的最大比率
max-device-height	输出设备的屏幕可见的最大高度
max-device-width	输出设备的屏幕最大可见宽度
max-height	输出设备中的页面最大可见区域高度
max-monochrome	在一个单色框架缓冲区中每像素包含的最大单色原件个数
max-resolution	设备最大分辨率
max-width	输出设备中页面最大可见区域宽度
min-aspect-ratio	输出设备中页面可见区域宽度与高度的最小比率
min-color	输出设备每一组彩色原件的最小个数
min-color-index	输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio	输出设备屏幕可见宽度与高度的最小比率
min-device-width	输出设备的屏幕最小可见宽度
min-device-height	输出设备的屏幕的最小可见高度
min-height	输出设备中的页面最小可见区域高度
min-monochrome	一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	设备的最小分辨率
min-width	输出设备中的页面最小可见区域宽度
monochrome	在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
orientation	输出设备中的页面可见区域高度是否大于或等于宽度
resolution	设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	电视类设备的扫描工序
width	输出设备中的页面可见区域宽度

Veillez à faire la distinction entre la largeur/hauteur de l'appareil et la largeur/hauteur
largeur/hauteur de l'appareil est la largeur de l'appareil (pas la largeur du navigateur)
largeur/hauteur est la taille de la fenêtre de notre navigateur
Utiliser documentElement.clientWidth/ clientHeight qui est valeur de la fenêtre d'affichage

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!