Analyse de l'utilisation de media query @media (avec démonstration de code)-tutoriel CSS-php.cn

Analyse de l'utilisation de media query @media (avec démonstration de code)

藏色散人

Libérer： 2022-08-07 16:48:14

avant

3023 Les gens l'ont consulté

Que sont les requêtes multimédias ?

Les requêtes multimédias nous permettent de définir des styles CSS pour l'affichage de l'appareil en fonction de ses caractéristiques (telles que la largeur de la fenêtre, le format de l'écran, l'orientation de l'appareil : paysage ou portrait). Les requêtes multimédias se composent d'un type de média et d'un ou plusieurs. plus Composé d'expressions conditionnelles pour détecter les caractéristiques du média. Les propriétés multimédias qui peuvent être détectées dans les requêtes multimédias sont width , height et color (etc.). À l'aide des requêtes multimédias, vous pouvez personnaliser l'effet d'affichage pour des périphériques de sortie spécifiques sans modifier le contenu de la page.

1. Méthode d'opération de requête multimédia

L'opération réelle est la suivante : commencez par demander à l'appareil (appelé une expression). Si le résultat de l'expression est vrai, le CSS dans la requête multimédia est appliqué. La requête multimédia CSS à l'intérieur sera ignorée.

2. Syntaxe de requête multimédia

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

Copier après la connexion

3. Démonstration de code 1qqq

<!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.0">
    <title>Document</title>
    <style>
        .row{
            border: 1px solid red;
        }
        .col{
            display: inline-block;
            width: 100%;
            height: 100px;
            background-color: green;
        }
        /* <768px */
        @media screen and (max-width:768px) { 
            .col{
                width: 100%;
            }
        }
        /* >=992 and  */
        @media screen and (min-width:992px){
            .col{
                width: 49%;
            }
        }
        /* >=768px and <1200px */
        @media screen and (min-width:768px) and (max-width:1200px){
            .col{
                width: 48%;
            }
        }
        /* >=1200px */
        @media screen and (min-width: 1200px) {
            .col{
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Copier après la connexion

Rendu après réduction à 768px