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.

Requêtes multimédia CSS3

Ouvrez ma page de démonstration, ajustez la taille du navigateur et vérifiez les modifications de la mise en page.

　 Largeur maximale

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" />

　Largeur minimale

Lorsque la zone d'affichage est supérieure à 900 px de largeur, CSS sera utilisé.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }}

　Requêtes multimédias multiples

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;
  }}

　Largeur de l'appareil

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;
  }}

　Pour iPhone 4

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" />

　Pour iPad

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">

Requêtes multimédias pour Internet Explorer

É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

Exemple de site

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.

Hicksdesign

• 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)

Colly

La mise en page bascule entre 1 colonne, 2 colonnes et 4 colonnes selon la zone visuelle du navigateur.

　A List Apart

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

　Tee Gallery

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%.

Résumé

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!