Comment résoudre le problème de média CSS3 qui ne fonctionne pas

Solution : 1. Assurez-vous que le format d'écriture du média est "@media screen and (css style){}" ; 2. Vérifiez si les styles sont en conflit 3. Définissez l'attribut viewport de la balise méta ; . Le média est suivi de Le contenu entre parenthèses ne peut pas contenir le caractère de fin ";". S'il y en a, il doit être supprimé.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

css3 Résumé des raisons pour lesquelles @media ne fonctionne pas

Confirmez d'abord s'il s'agit d'un problème avec le CSS lui-même, plutôt que si la requête multimédia ne prend pas effet ; exemple,

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

Le style externe introduit le src utilisé en CSS C'est une erreur d'inattention

<link src="/css/imgpro.css" rel="stylesheet" > /*这是错误的*/
<link href="/css/imgpro.css" rel="stylesheet" >/*这是正确的*/

S'il s'agit d'un problème CSS, nous ne pouvons analyser le problème spécifique qu'en détail.

Veuillez suivre les erreurs suivantes pour résoudre les problèmes.

La première erreur : erreur d'écriture de format et il doit y avoir un espace après, comme le code suivant

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

La deuxième erreur : conflit de style le style du code de 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 à l'arrière pour éviter 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. Le CSS ne prend pas effet

Remarque : Il s'agit d'une erreur très courante. Par exemple, l'élément de bloc flottant fait que l'élément parent n'a pas de hauteur pour le moment. l'ajout d'une couleur d'arrière-plan à l'élément parent ne prend pas effet. Cela est en fait dû au CSS. L'erreur ne s'affiche pas.

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 : attribut de fenêtre 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 être écrit avec le caractère de fin " ;" et d'autres erreurs.

Recommandations associées : Tutoriel vidéo CSS

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!