Présenter ce qu'est une requête média

Quel est le cœur de l'apprentissage des requêtes multimédias ?

(Tutoriel recommandé : Tutoriel vidéo HTML)

Réaliser l'aperçu normal de la page sous différents appareils [Juger l'appareil actuel]

Type de média

Diviser différents appareils en différents types

tous (tous les appareils)

imprimer (appareil d'impression)

écran (écran d'ordinateur, tablette, smartphone)

Fonctionnalités multimédias

Utilisé pour décrire les caractéristiques de l'appareil, telles que la largeur, la hauteur...

largeur La zone d'affichage de la page Web est complètement égale à la largeur définie

hauteur Le Web la zone d'affichage de la page est complètement égale à la largeur définie Hauteur

max-width / max-height La zone d'affichage de la page Web est inférieure ou égale à la largeur définie

min-width / min- width La zone d'affichage de la page Web est supérieure ou égale à la largeur définie

orientation : portrait (mode portrait) | paysage (mode horizontal)

Mots-clés de syntaxe

Objectif : lier les types de médias et les caractéristiques des médias pour la détection des appareils

et peut lier plusieurs fonctionnalités multimédias ensemble, ce qui équivaut à et

ne pas exclure une certaine fonctionnalité multimédia équivaut à non, qui peut être omis

spécifie uniquement un type de média spécifique, vous pouvez omettre

Syntaxe

Syntaxe du contour

<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">

- 内嵌式语法
      @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }
      
      备注: 多个条件联写
      @media only screen and (width: 320px) and (height: 568px) {}

Recommandations associées : tutoriel HTML

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!