La requête multimédia est-elle un nouvel attribut en CSS3 ?

La requête Media est une nouvelle fonctionnalité de CSS3, qui peut être utilisée pour la conception réactive de la page ; en utilisant la requête "@media", elle peut être utilisée pour définir des styles échoués pour différents types de médias, et peut également définir différents styles pour différents tailles d'écran, la syntaxe est "@media [support multimédia] et | ou (condition) et | ou (condition) {style}".

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

La requête multimédia est-elle un nouvel attribut de CSS3 ?

1. La requête multimédia est une nouvelle fonctionnalité de CSS3, qui peut être utilisée pour la conception réactive de la page.

2. Plusieurs ensembles de styles différents peuvent être conçus pour différents écrans et différentes résolutions.

Syntaxe des requêtes multimédias

@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}

En utilisant les requêtes @media, vous pouvez définir différents styles pour différents types de médias.

@media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile.

Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

Syntaxe CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

non, et, et ne peut être utilisée que pour construire conjointement des requêtes multimédias complexes, et vous pouvez également combiner plusieurs requêtes multimédias en une seule règle en les séparant par des virgules.

not, uniquement and et signification du mot-clé :

• not : L'opérateur not est utilisé pour annuler les requêtes multimédias. Si cette condition n'est pas remplie, il renvoie vrai, sinon il renvoie faux. S'il est présent dans une liste de requêtes séparées par des virgules, il annulera uniquement la requête spécifique à laquelle il est appliqué. Si vous utilisez l'opérateur not, vous devez également spécifier le type de média.

• only : l'opérateur only est utilisé pour appliquer un style uniquement si l'intégralité de la requête correspond, et est utile pour empêcher les anciens navigateurs d'appliquer le style sélectionné. Lorsque only n'est pas utilisé, les anciens navigateurs interpréteront simplement screen et (largeur maximale : 500 px) comme screen, ignoreront le reste de la requête et appliqueront ses styles à tous les écrans. Si vous utilisez l'opérateur unique, vous devez également spécifier le type de média.

• , (virgule) La virgule est utilisée pour combiner plusieurs requêtes multimédias en une seule règle. Chaque requête de la liste séparée par des virgules est traitée séparément des autres requêtes. Par conséquent, si une requête de la liste est vraie, l’intégralité de l’instruction media renvoie true. En d’autres termes, la liste se comporte comme l’opérateur logique or.

• and : et l'opérateur est utilisé pour combiner plusieurs règles de requête multimédia en une seule requête multimédia. Lorsque chaque règle de requête est vraie, la requête multimédia est également utilisée pour combiner des fonctions multimédias avec des types de médias combinés.

Les types de médias décrivent les catégories générales d'appareils. À moins que les opérateurs logiques not ou only soient utilisés, le type de média est facultatif et le type all est (implicitement) appliqué.

Vous pouvez également utiliser différents fichiers de style pour différents médias :

<!-- 宽度大于 900px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<!-- 宽度小于或等于 600px 的屏幕使用该样式 -->
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS, Tutoriel vidéo 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!