Requêtes multimédias CSS : appliquez différents styles pour différents appareils et tailles d'écran

Les requêtes multimédias CSS sont une technique très utile dans la conception Web, qui nous permet d'appliquer différents styles en fonction des différents appareils et tailles d'écran. Grâce aux requêtes multimédias, nous pouvons ajuster la mise en page et l'apparence de la page Web en fonction du type d'appareil utilisé par l'utilisateur, tel qu'un ordinateur, une tablette ou un téléphone mobile, ainsi que de facteurs tels que la largeur et la hauteur de l'écran, pour offrir une meilleure expérience utilisateur.

Avant d'utiliser les requêtes multimédias CSS, nous devons comprendre certains concepts et utilisations de base. Tout d’abord, nous devons préciser que les requêtes multimédias sont une fonction CSS3, le navigateur doit donc prendre en charge CSS3 pour fonctionner correctement.

Les requêtes Media sont définies à l'aide de la règle @media et sont généralement écrites en haut du fichier CSS pour être chargées en premier. La syntaxe de la requête multimédia est la suivante :

@media mediatype et (condition) {
CSS style
}

où mediatype représente le type de média courant sont les suivants :

• all : applicable à tous les appareils multimédias.
• screen : pour les écrans d'ordinateur ;
• print : pour les imprimantes et les aperçus avant impression ;
• handheld : pour les appareils portables tels que les téléphones et les tablettes.

La partie condition est au cœur de la requête multimédia, et les conditions sont utilisées pour filtrer les appareils ou les tailles d'écran qui répondent aux conditions. Les conditions peuvent inclure les attributs suivants couramment utilisés :

• width : largeur de l'écran ;
• height : hauteur de l'écran ;
• device-width : largeur de l'appareil ;
• device-height : hauteur de l'appareil ;
aspect-rapport : rapport hauteur/largeur de l'écran ;
• résolution : résolution de l'écran.
• Voici quelques exemples de code concrets montrant comment utiliser les requêtes multimédias pour s'adapter à différents appareils et tailles d'écran :

Appliquer des styles spécifiques pour les appareils à grand écran :

1. @écran multimédia et (largeur minimale : 1 200 px) {
/

Styles appliqués lorsque la largeur de l'écran est supérieure ou égale à 1200px

/
body {

  font-size: 18px;

}
}

Appliquer des styles spécifiques pour les appareils à petit écran :

2. @media screen et (max-width : 767px) {
/

Styles appliqués lorsque la largeur de l'écran est de 767 px ou moins

/
body {

  font-size: 14px;

}
}

Appliquer des styles spécifiques pour les affichages en mode paysage :

3. @écran multimédia et (orientation : paysage) {
/

Styles appliqués lors de l'affichage en mode paysage

/
body {

  background-color: yellow;

}
}

Combinez plusieurs conditions à l'aide de requêtes multimédia :

4. @media screen et (min-width : 768px) et (max- width : 1199px) {
/

Styles appliqués lorsque la largeur de l'écran est comprise entre 768px et 1199px

/
body {

  font-size: 16px;

}
}

Grâce à l'exemple ci-dessus, nous pouvons voir que les requêtes multimédias peuvent être personnalisées en fonction de différents appareils Appliquer différents styles à la taille de l’écran pour obtenir une conception réactive de la page Web. Grâce à l'utilisation flexible des requêtes multimédias, nous pouvons offrir aux utilisateurs de différents appareils une meilleure expérience utilisateur et obtenir de bons effets d'affichage d'interface, que ce soit sur des ordinateurs, des tablettes ou des téléphones mobiles.

Bien sûr, les requêtes multimédias ne sont qu'une partie du design réactif, et d'autres technologies et pratiques doivent être combinées pour compléter une conception Web réactive complète. Dans les applications pratiques, nous pouvons sélectionner les conditions de requête multimédia appropriées en fonction des besoins du projet et des groupes d'utilisateurs, et écrire les styles CSS correspondants pour obtenir la meilleure conception réactive.

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!