Une brève introduction aux requêtes multimédia CSS3 (exemple de code)

Le contenu de cet article est une brève introduction (exemple de code) sur la requête multimédia CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Requête multimédia CSS2 :

Les règles @media sont introduites dans CSS2, et différentes règles de style peuvent être personnalisées pour différents types de médias (y compris les moniteurs, les appareils portables, les téléviseurs, etc.).

Requête multimédia CSS3 :

La requête multimédia CSS3 hérite de toutes les idées des types multimédia CSS2, en remplaçant le type de périphérique de recherche, et de l'affichage adaptatif CSS3 selon les paramètres.

Les requêtes multimédias peuvent vérifier de nombreuses choses : largeur et hauteur de la fenêtre d'affichage, largeur et hauteur de l'appareil, orientation, résolution.

Syntaxe de requête :

@media  not|only|all    mediatype and (expressions){
　　　　css-sode;
　　}

non : exclure certains types d'appareils, uniquement : uniquement certains types d'appareils, tous : tous les appareils.

Vous pouvez utiliser différents fichiers de style sur différents supports :

<link rel="stylesheet" media=" mediatype and|only|all (expressions)" href="print.css"/>

Type de support :

tous Tous les supports

imprimante d'impression

écran Ordinateur, tablette, téléphone portable

parole Lecteur d'écran

Fonction média :

largeur/hauteur de l'appareil : largeur/hauteur visible de l'écran de l'appareil

height, width : la hauteur et la largeur de la zone visible de la page

max-device-width/height : la largeur et la hauteur visibles maximales de l'écran.

Exemple de requête multimédia CSS3 :

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!