Maison > Article > interface Web > Analyse de l'utilisation de media query @media (avec démonstration de code)

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

藏色散人avant: 2022-08-07 16:48:142990parcourir

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) {
        }

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>

Rendu après réduction à 768px

Apprentissage recommandé : "web front-end"

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Vous apprendre étape par étape comment introduire l'icône de police iconfont ?Article suivant：Vous apprendre étape par étape comment introduire l'icône de police iconfont ?

Articles Liés

Voir plus