Quelle est la composition grammaticale des requêtes multimédias en CSS3

La syntaxe de la requête multimédia est "@media not|only mediatype and (expressions) {CSS code...;}" ; expression renvoie vrai ou faux selon que la condition est vraie ou non.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

La requête multimédia de CSS3 hérite de toutes les idées des types multimédia CSS2 : au lieu de rechercher le type d'appareil, CSS3 s'affiche de manière adaptative en fonction des paramètres.

Les requêtes multimédias peuvent être utilisées pour détecter de nombreux éléments, tels que :

• La largeur et la hauteur de la fenêtre (fenêtre)

• L'appareil Largeur et hauteur

• Orientation (écran horizontal, écran vertical du smartphone)

• Résolution

Actuellement, de nombreux appareils tels que les téléphones Apple, les téléphones Android, les tablettes, etc. utilisent des requêtes multimédia.

Syntaxe de requête

@media not|only mediatype and (expressions) {
    CSS 代码...;
 }

La requête multimédia se compose d'une variété de médias et peut contenir une ou plusieurs expressions. L'expression est basée sur le fait que le. la condition est vraie. Renvoie vrai ou faux.

Type de média

Si le type multimédia spécifié correspond au type d'appareil, le résultat de la requête renvoie vrai et le document sera activé l'appareil correspondant affiche l'effet de style spécifié.

À moins que les opérateurs pas ou seuls ne soient utilisés, tous les styles seront adaptés pour être affichés sur tous les appareils.

值	描述
all	用于所有媒体设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等
speech	用于屏幕阅读器

Fonction média

值	描述
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
device-height	定义输出设备的屏幕可见高度。
device-width	定义输出设备的屏幕可见宽度。
height	定义输出设备中的页面可见区域高度。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-width	定义输出设备中的页面最小可见区域宽度。
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
width	定义输出设备中的页面可见区域宽度。

Par exemple
La largeur de l'écran est supérieure à 480px , la police La taille est définie sur 16px.

@media screen and (min-width: 480px) {
    body {
       font-size:16px;
    }
}

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!