Maison >interface Web >Questions et réponses frontales >Que faire si la requête multimédia CSS échoue

Que faire si la requête multimédia CSS échoue

藏色散人
藏色散人original
2023-01-28 15:29:582342parcourir

Solution à la requête multimédia CSS invalide : 1. Modifiez la syntaxe telle que "@media screen and (max-width:768px){...}" ; 2. Ajoutez les balises méta nécessaires au fichier d'en-tête HTML ; le média L'instruction de requête peut être placée après le document CSS d'origine.

Que faire si la requête multimédia CSS échoue

L'environnement d'exploitation de ce tutoriel : système Windows 10, version css3, ordinateur DELL G3

Que dois-je faire si la requête multimédia css échoue ?

La requête CSS @media media n'est pas valide

Le style CSS écrit avec @media media query n'est pas valide ?

1. Problème

Le style CSS écrit avec @media media query n'est pas valide pour le HTML.

2. Solution

Essayez-en une : Spécification de grammaire - un espace est requis entre 'et' et '('

@media screen and (max-width:768px){
    body {
       padding-top:150px;
    padding-bottom: 20px;
    }
}

Essayez-en deux : Environnement - assurez-vous que les balises méta nécessaires sont ajoutées au fichier d'en-tête html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/index.css">
  </head>

Essayez trois : Priorité - placez l'instruction de requête multimédia après le document CSS original

body{
   padding-top:50px;
   padding-bottom:20px;
}
@media screen and (max-width:768px){
    body {
       padding-top:150px;
    padding-bottom: 20px;
    }
}

Apprentissage recommandé : "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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn