Maison >interface Web >Tutoriel H5 >HTML5 Practice-CSS3 Media Queries Introduction détaillée
CSS2 vous permet de styliser des types de médias spécifiques, tels que des écrans ou des imprimantes. CSS3 fournit des requêtes multimédias plus puissantes. Vous pouvez définir des expressions pour différents types de médias et définir différents styles en fonction de différentes conditions. Par exemple, vous pouvez définir un style pour les grands écrans et un autre style pour les mobiles. Cette fonction est assez puissante. Vous pouvez fournir différents effets de style pour différents appareils sans modifier le contenu de la page. Dans les leçons suivantes, nous présenterons quelques sites qui utilisent cette technologie.
Ouvrez ma page de démonstration, ajustez la taille du navigateur et vérifiez les modifications de la mise en page.
Lorsque la zone d'affichage de la page est inférieure à 600 px de largeur, css sera utilisé.
@media screen and (max-width: 600px) { .class { background: #ccc; }}
Vous pouvez également utiliser la méthode suivante pour référencer des fichiers CSS externes dans le 93f0f5c25f18dab9d176bd4f6de5d30e
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Lorsque la zone d'affichage est supérieure à 900 px de largeur, CSS sera utilisé.
@media screen and (min-width: 900px) { .class { background: #666; }}
Vous pouvez combiner plusieurs requêtes multimédias ensemble Lorsque la largeur de la zone d'affichage est comprise entre 600 px et 900 px, elle utilisera le CSS. ci-dessous.
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
Le CSS suivant sera utilisé lorsque la largeur maximale de l'appareil est de 480 pixels, comme sur l'iPhone.
Remarque : max-device-width fait référence à la résolution réelle de l'appareil et max-width fait référence à la taille de la zone.
@media screen and (max-device-width: 480px) { .class { background: #000; }}
Ce qui suit est le CSS pour iPhone 4.
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
Vous pouvez également vérifier le positionnement (portrait ou paysage) sur iPad.
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Étant donné qu'IE8 et les versions précédentes des navigateurs ie ne prennent pas en charge les requêtes multimédias, vous devez utiliser des hacks JavaScript pour résoudre le problème. Voici quelques solutions :
Astuces CSS - Utilisez jquery pour déterminer la taille du navigateur
The Man in Blue - Utilisez Javascript (ce l'article a été écrit il y a six ans)
Plugin jQuery Media Queries
Vous Les sites suivants est accessible à l'aide de navigateurs prenant en charge les requêtes multimédias, tels que Firefox, Chrome et Safari. Vous pouvez voir comment leur mise en page répond à la largeur du navigateur.
Grande taille : Barre latérale à 3 colonnes
Petite taille : 2 colonnes de barres latérales (la barre latérale du milieu va vers la gauche)
Taille plus petite : 1 colonne de barres latérales (la plus à droite passe sous le logo)
Taille minimale : Pas de barre latérale (le logo et la barre latérale de droite montent, les autres barres latérales descendent)
La mise en page bascule entre 1 colonne, 2 colonnes et 4 colonnes selon la zone visuelle du navigateur.
Grande taille : Navigation en haut, 1 ligne d'images
Taille moyenne : Navigation à gauche, 3 colonnes d'images
Petite taille : Navigation en haut, logo sans image de fond, 3 colonnes d'images
C'est un peu similaire au Colly précédent. La différence est que ses images seront mises à l'échelle en fonction des changements dans la mise en page. L'astuce utilisée ici consiste à utiliser une largeur en pourcentage pour l'image au lieu d'une largeur fixe, par exemple : width=100%.
Nous devons noter que créer un CSS pour mobile ne signifie pas que notre site est optimisé pour les appareils mobiles. Pour optimiser les appareils mobiles, les images du site Web et le code HTML doivent également être réduits en taille pour faciliter le chargement. MediaQuery effectue uniquement la présentation de la conception, pas les opérations d'optimisation.
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!