Comment les requêtes multimédias vous aident-elles à concevoir des sites Web réactifs pour différentes tailles d'écran ?

Requêtes multimédias pour l'adaptation de la taille de l'écran

Lors de la conception de mises en page Web pour plusieurs tailles d'écran, les requêtes multimédias deviennent des outils essentiels. Ces requêtes permettent aux développeurs de spécifier comment une mise en page doit s'ajuster en fonction de la largeur de l'écran.

Application de requêtes multimédias pour des tailles d'écran spécifiques

Pour cibler une taille d'écran spécifique, utilisez l'attribut media avec la propriété max-width. Par exemple, pour appliquer des styles à des écrans d'une largeur inférieure à 800 px, utilisez :

@media screen and (max-width: 800px) {
  /* Styles for screens less than 800px wide */
}

Utilisation de l'exemple de code fourni

L'exemple de code fourni utilise les requêtes multimédias suivantes :

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles for smartphones in portrait and landscape */
}

/* Smartphones (landscape) */
@media only screen 
and (min-width : 321px) {
  /* Styles for smartphones in landscape */
}

/* Smartphones (portrait) */
@media only screen 
and (max-width : 320px) {
  /* Styles for smartphones in portrait */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles for iPads in portrait and landscape */
}

/* iPads (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles for iPads in landscape */
}

/* iPads (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  /* Styles for iPads in portrait */
}

/* Desktops and laptops */
@media only screen 
and (min-width : 1224px) {
  /* Styles for desktops and laptops */
}

/* Large screens */
@media only screen 
and (min-width : 1824px) {
  /* Styles for large screens */
}

/* iPhone 4 - 5s */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles for iPhone 4 - 5s */
}

/* iPhone 6 */
@media
only screen and (max-device-width: 667px) 
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles for iPhone 6 */
}

/* iPhone 6+ */
@media
only screen and (min-device-width : 414px) 
only screen and (-webkit-device-pixel-ratio: 3) {
  /* Styles for iPhone 6+ */
}

/* Samsung Galaxy S7 Edge */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles for Samsung Galaxy S7 Edge */
}

Ces requêtes multimédias couvrent un large éventail de tailles d'écran, notamment les smartphones, les tablettes et les plus grands. écrans.

Considérations supplémentaires

Envisagez d'utiliser des valeurs em au lieu de pixels pour une plus grande flexibilité dans différentes tailles d'écran. Pour plus d'informations, reportez-vous à l'article « Media Query Units » de Zell Weekley.

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!