Que se passe-t-il lorsque plusieurs requêtes multimédia CSS se chevauchent ?

Chevauchement des requêtes multimédias : Cascade règne en maître

Que se passe-t-il lorsque plusieurs requêtes multimédias correspondent à la même taille de fenêtre d'affichage ? La réponse réside dans les principes fondamentaux du CSS : la cascade et les règles de chevauchement.

Cascade en action

Les règles @media suivent la cascade tout comme les règles CSS classiques. Lorsque plusieurs règles @media correspondent, tous les styles correspondants sont appliqués et la cascade résout tous les conflits. En d'autres termes, la dernière règle de style déclarée et la plus spécifique l'emporte.

Chevauchement aux points d'arrêt

À exactement 20em et 45em, vos première et deuxième requêtes média, et vos deuxième et troisième requêtes média, respectivement, correspondront. Les navigateurs appliquent les styles des deux règles et les mettent en cascade en conséquence. S'il y a des déclarations contradictoires, la règle déclarée en dernier prévaudra.

Exemple de répartition

Considérez le code suivant :

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

À 20em à l'échelle large, les deux requêtes multimédias correspondent. La cascade remplace display: none par display: block et float: left s'applique aux éléments avec la classe .sidebar.

Éviter le chevauchement avec l'exclusion mutuelle

Pour éviter le chevauchement , assurez-vous que vos requêtes multimédias s’excluent mutuellement. N'oubliez pas que min et max dénotent l'inclusivité. (largeur minimale : 20 em) et (largeur maximale : 20 em) correspondent toutes deux à des fenêtres d'affichage de 20 em de large.

Valeurs fractionnaires de pixels

Les valeurs de pixels en CSS sont des pixels logiques. Je n'ai pas pu trouver de navigateur indiquant des valeurs de pixels fractionnaires pour la largeur de la fenêtre. Safari sur iOS arrondit les valeurs fractionnaires pour garantir que (largeur maximale : 799 px) ou (largeur minimale : 800 px) correspond à au moins une règle, même si la fenêtre d'affichage est de 799,5 px.

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!