Comment puis-je obtenir une séparation complète des styles CSS pour ordinateur et mobile à l'aide de plages de requêtes multimédias ?

CSS réactif pour les appareils mobiles : parvenir à la séparation

Dans le domaine de la conception Web réactive, le défi consistant à appliquer des styles séparés aux ordinateurs de bureau et aux appareils mobiles peut se poser. Pour résoudre ce problème, une technique spécifique appelée plages de requêtes multimédias peut être utilisée.

Considérons votre code actuel :

@media only screen and (max-device-width: 600px) { /* mobile only styles when the device is 0-600px in maximum width */ }

@media only screen and (max-device-width: 1000px) { /* mobile only styles when the device is up to 1000px in maximum width */ }

Ici, vous essayez d'appliquer des styles mobiles uniquement pour un appareil spécifique. largeurs. Cependant, cette approche ne sépare pas complètement les styles mobile et bureau.

Utilisation des plages de requêtes multimédias

Pour obtenir une séparation complète, vous pouvez utiliser une série de médias imbriqués plages de requêtes :

/* main desktop styles */

@media all and (min-width: 1024px) {
  /* your desktop styles */
}

@media all and (min-width: 960px) and (max-width: 1024px) {
  /* styles for screen size between 960px and 1024px */
}

@media all and (min-width: 801px) and (max-width: 959px) {
  /* styles for screen size between 801px and 959px */
}

/* repeat for other desired screen sizes */

@media all and (min-width: 321px) and (max-width: 480px) {
  /* styles for screen size between 321px and 480px */
}

@media all and (min-width: 0px) and (max-width: 320px) {
  /* styles for screen size between 0px and 320px */
}

Cette technique permet un contrôle précis de l'application des styles pour des largeurs d'appareil spécifiques. Les requêtes imbriquées garantissent que les styles de chaque plage de tailles d'écran restent isolés des autres plages.

Considérations supplémentaires

Pour optimiser la réactivité de votre conception, envisagez d'utiliser des em ou % au lieu de px pour le dimensionnement. Cela garantit que les éléments évoluent proportionnellement sur différentes tailles d’écran. Assurez-vous également que vos points d'arrêt couvrent une large gamme d'appareils pour répondre à différentes résolutions d'écran.

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!