Explication détaillée de la façon d'utiliser les médias CSS

Dans le développement de sites Web, l'importance du CSS va de soi. Nous pouvons utiliser CSS pour définir divers attributs d'apparence tels que le style, la mise en page, les polices, etc. pour le site Web afin de le rendre plus attrayant et lisible. Cependant, différents appareils (tels que les ordinateurs de bureau, les tablettes, les téléphones mobiles, etc.) ont des tailles d'écran et des résolutions différentes. Sans paramètres de style CSS pour différents appareils, l'effet d'affichage du site Web peut être assez insatisfaisant.

L'un des moyens de résoudre ce problème est la fonction CSS Media Query, qui peut écrire différents styles CSS pour différents appareils. Cet article fournira une introduction approfondie aux concepts de base, à la syntaxe et aux cas d'application de CSS Media Query, vous permettant de démarrer avec cette technologie pratique.

Qu'est-ce que CSS Media Query

CSS Media Query est une instruction conditionnelle intégrée dans une feuille de style qui est utilisée pour spécifier différents styles CSS à appliquer à différentes tailles d'écran et types d'appareils. Grâce à CSS Media Query, nous pouvons mettre en œuvre une conception de site Web réactive (Responsive Web Design), afin que le site Web puisse offrir la meilleure expérience utilisateur sur différents appareils.

La partie CSS Media Query est composée de types de médias et de fonctionnalités multimédias. Le format est le suivant :

@media mediatype and|not|only (media feature) {
   CSS rules;
}

où mediatype spécifie le type de média auquel les styles CSS doivent être appliqués, tels que écran, impression, ordinateur de poche, etc. , tandis que la fonctionnalité multimédia spécifie que les styles CSS doivent être appliqués aux caractéristiques multimédias telles que la largeur de l'appareil, la hauteur de l'appareil, l'orientation, etc.

Type de média

Le type de média fait référence au type d'appareil utilisé pour restituer le document. Les types de médias courants incluent :

• all : fonctionne sur tous les appareils.
• impression : convient aux périphériques de sortie tels que les imprimantes et les aperçus avant impression.
• écran : convient aux écrans d'ordinateur, tablettes, smartphones et autres appareils à écran.
• ordinateur de poche : convient aux appareils portables dotés de petits écrans (tels que les smartphones).
• parole : convient aux appareils audio tels que les lecteurs d'écran.

Propriétés des médias

Les propriétés des médias incluent, sans s'y limiter, les éléments suivants :

• largeur : largeur de la fenêtre d'affichage, unité px.
• hauteur : hauteur de la fenêtre, unité px.
• device-width : largeur de l'appareil.
• device-height : hauteur de l'appareil.
• orientation : orientation de l'appareil, paysage (horizontal) ou portrait (vertical).
• aspect-ratio : le rapport entre la largeur et la hauteur de la fenêtre d'affichage.
• color : profondeur de bits de la couleur de l'appareil.
• résolution : résolution de l'appareil, unité dpi.

Grâce aux deux combinaisons ci-dessus, nous pouvons définir différents styles CSS pour différents types d'appareils et attributs d'écran.

Exemples d'utilisation de CSS Media Query

Voici quelques exemples spécifiques d'utilisation de CSS Media Query, impliquant des styles personnalisés pour différents appareils et caractéristiques d'écran.

1. Définissez différents styles pour différents types d'appareils

/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
   body {
      background-color: #333333;
   }
}

/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
   body {
      background-color: #ffffff;
   }
}

Les deux morceaux de code CSS ci-dessus appliquent respectivement des couleurs d'arrière-plan différentes aux écrans d'ordinateur et de smartphone.

2. Définissez différents styles pour l'orientation de l'appareil

/* 设备为横向 */
@media screen and (orientation: landscape) {
   body {
      background-color: #f3f3f3;
   }
}

/* 设备为竖向 */
@media screen and (orientation: portrait) {
   body {
      background-color: #ffffff;
   }
}

Les deux morceaux de code CSS ci-dessus définissent différentes couleurs d'arrière-plan pour l'orientation de l'appareil (horizontale ou verticale).

3. Définissez différents styles en fonction de la largeur de la fenêtre d'affichage

/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
   body {
      font-size: 16px;
   }
}

/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
   body {
      font-size: 14px;
   }
}

Les deux morceaux de code CSS ci-dessus appliquent différentes tailles de police en fonction de la largeur de la fenêtre d'affichage.

4. Combiner plusieurs conditions

Bien sûr, en utilisation réelle, plusieurs conditions doivent être combinées en fonction de circonstances spécifiques. Par exemple, nous souhaitons définir une image de logo adaptée aux smartphones, mais elle ne prendra effet que lorsque la largeur de la fenêtre d'affichage de l'appareil est inférieure ou égale à 800 px. A ce moment, vous pouvez utiliser le code suivant :

@media handheld and (max-device-width: 800px), 
(-webkit-min-device-pixel-ratio: 1.5) {
   #logo {
      content:url('logo-for-smartphone.png');
   }
}

Dans ce code CSS, nous utilisons handheld and (max-device-width: 800px)和(-webkit-min-device-pixel-ratio: 1.5)deux conditions. Le premier spécifie que l'appareil est un appareil portable et que la largeur de la fenêtre d'affichage de l'appareil est inférieure à 800 px. Ce dernier est compatible avec le moteur de rendu WebKit et spécifie que le rapport de pixels de l'appareil est supérieur à 1,5.

Résumé

La fonction CSS Media Query est une partie importante de la conception de sites Web réactifs et peut nous aider à écrire différents styles CSS pour différents types d'appareils et caractéristiques d'écran. Grâce à l'introduction de cet article, vous devriez avoir compris les concepts de base, la syntaxe et les méthodes d'application de CSS Media Query, et pouvoir les utiliser pour fournir des styles plus raffinés et personnalisés pour la conception de votre site Web.

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!