Requêtes multimédia CSS3

La requête multimédia de CSS3 hérite de toutes les idées des types multimédia CSS2 : au lieu de rechercher le type d'appareil, CSS3 s'affiche de manière adaptative en fonction des paramètres.

Les requêtes multimédias peuvent être utilisées pour détecter de nombreux éléments, tels que :

largeur et hauteur de la fenêtre d'affichage(viewport)

largeur et hauteur de l'appareil

orientation ( écran horizontal de téléphone portable intelligent, écran vertical).

Résolution

Actuellement, de nombreux appareils tels que les téléphones Apple, les téléphones Android et les tablettes utilisent des requêtes multimédias.

Syntaxe de requête multimédia

La requête multimédia se compose d'une variété de médias et peut contenir une ou plusieurs expressions. expression renvoie vrai ou faux selon que la condition est vraie ou non.

@media non|seulement le type de média et (expressions) {

Code CSS ;

}

Si le type multimédia spécifié correspond au type d'appareil, le résultat de la requête renvoie vrai et le document affichera le style spécifié sur l'effet de l'appareil correspondant.

À moins d'utiliser les opérateurs pas ou seulement, tous les styles seront adaptés pour s'afficher sur tous les appareils.

not : not est utilisé pour exclure certains appareils spécifiques, tels que @media not print (appareil non-imprimeur).

uniquement : utilisé pour spécifier un type de média spécifique. Pour les appareils mobiles prenant en charge les requêtes multimédias, si le seul mot-clé existe, le navigateur Web de l'appareil mobile ignorera le seul mot-clé et appliquera directement le fichier de style en fonction de l'expression suivante. Pour les appareils qui ne prennent pas en charge Media Queries mais sont capables de lire les navigateurs Web Media Type, ce fichier de style sera ignoré lorsque le seul mot-clé est rencontré.

tous : tous les appareils, cela devrait être vu souvent.

Instance 1 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
 /*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   
</style>
</head>
<body>
  <p id="p">小于200px背景变红色大于300px背景为黄色</p> 
</body>
</html>

Instance 2 :

rrree

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>php.cn</title> <style> .wrapper {overflow:auto;} #main {margin-left: 4px;} #leftsidebar {float: none;width: auto;} #menulist {margin:0;padding:0;} .menuitem { background:#CDF0F6; border:1px solid #d4d4d4; border-radius:4px; list-style-type:none; margin:14px; padding:12px; } @media screen and (min-width: 300px) { #leftsidebar {width:200px;float:right;} #main {margin-left:216px;} } </style> </head> <body> <div class="wrapper"> <div id="leftsidebar"> <ul id="menulist"> <li class="menuitem">php</li> <li class="menuitem">js</li> <li class="menuitem">css</li> <li class="menuitem">html</li> <li class="menuitem">ios</li> </ul> </div> <div id="main"> <p>在屏幕可视窗口尺寸小于 300 像素时将菜单浮动到页面右侧。</p> </div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Requêtes multimédia CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]