Pourquoi CSS3 @media ne fonctionne-t-il pas ? Quelle en est la raison ?

Les raisons pour lesquelles le média CSS3 ne fonctionne pas : 1. L'attribut viewport n'est pas défini dans la balise méta HTML ; 2. Conflit de style, le style du code de requête @media est écrasé par le CSS suivant ; . Il y a une erreur dans l'écriture du format, il doit y avoir un espace après le et dans l'instruction mediah.

L'environnement d'exploitation de ce tutoriel : windows10, css3, cet article est applicable à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vidéo CSS"

Dans la production de pages Web, utilisez l'écran @media pour adapter la mise en page de la page Web en fonction des différents appareils d'accès. Ajoutez simplement l'attribut @media screen au CSS, écrivez les styles CCS en fonction de la largeur des différents appareils, jugez le fichier de style en fonction de la largeur du navigateur et affichez différentes valeurs de largeur.

Mais parfois, après avoir défini la requête @media media, on constate qu'elle ne fonctionne pas. Quelle est la raison ? Comment le résoudre ? L’article suivant vous le présentera.

Raisons possibles pour lesquelles css3 @media ne fonctionne pas

Pas de panique, analysez-le lentement.

Tout d'abord, confirmez si le problème vient du CSS lui-même, plutôt que de la requête multimédia qui ne prend pas effet. Par exemple :

div{display:flex;}/*那么div所有的display效果都将无法生效*/

La première erreur : erreur de formatage, et doit être suivie d'un espace

Par exemple, le code suivant :

@media screen and (max-width:500px){ }

Deux erreurs : conflit de style ; le style du code de la requête @media est écrasé par le CSS suivant

Remarque : Il est recommandé que lors de l'écriture du CSS, le CSS avec la requête @media soit écrit à la fin pour éviter cela. Évitez d'être écrasé par le CSS précédent.

La troisième erreur : il y a un problème avec le CSS lui-même, ce qui empêche le CSS de prendre effet

Remarque : il s'agit d'une erreur très courante, telle qu'une élément de bloc flottant faisant que le parent L'élément n'a pas de hauteur À ce stade, l'ajout d'une couleur d'arrière-plan à l'élément parent n'a pas pris d'effet. En fait, il s'agissait d'une erreur causée par CSS et n'a pas été affichée.

Par exemple, la priorité de la sélection CSS fera également que l'un d'entre eux prendra effet et l'autre ne prendra pas effet. Il existe également de nombreux problèmes causés par les erreurs CSS, je ne les listerai donc pas un par un. .

La quatrième erreur : l'attribut de fenêtre d'affichage d'attribut méta. Bien que cela relève du bon sens, certaines personnes peuvent le manquer.

<meta name="viewport" content="width=device-width, initial-scale=1" />

La cinquième erreur : le contenu entre parenthèses ne peut pas contenir le caractère de fin ";", et d'autres erreurs.

Solution :

Il existe de nombreuses solutions, mais la suggestion est d'utiliser la méthode d'élimination CSS et d'utiliser CSS pour en commenter une partie

Bien entendu, le navigateur est également un bon moyen de visualiser le code et de résoudre des problèmes.

@media screen and (max-width:200px){
/*这只是一个示例*/
}

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

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!