Comment puis-je utiliser efficacement « @media min-width & max-width » pour une conception réactive multi-navigateurs ?

Utilisation de "@Media min-width & max-width" pour un design réactif

Dans votre configuration, vous combinez le "@media" règle avec la balise méta viewport pour obtenir une conception réactive. Cependant, vous avez mentionné avoir rencontré des problèmes avec la mise en œuvre du navigateur.

Pour comprendre le problème, étudions la signification de "@media min-width & max-width" :

• @media screen et (min-width : 769px) : Cette règle applique les styles aux écrans d'une largeur minimale de 769px.
• @media screen et (min-device-width : 481px) et (max-device-width : 768px) : cette règle applique des styles spécifiquement aux appareils avec une largeur minimale d'appareil de 481 px et une largeur maximale de l'appareil de 768 px.
• @media uniquement écran et (max-device-width : 480px) : Cette règle applique les styles aux appareils dont la largeur maximale est de 480px.

Compatibilité avec les navigateurs

Le problème que vous rencontrez pourrait être lié à la compatibilité du navigateur avec les requêtes « @media ». Les navigateurs plus anciens, y compris IE 5.5-8, ne prennent pas en charge les requêtes "@media".

Recommandations de bonnes pratiques

Pour garantir la compatibilité entre navigateurs, il est recommandé de suivez ces bonnes pratiques :

• Utiliser le CSS par défaut pour les navigateurs plus anciens : Créer règles CSS par défaut pour les anciens navigateurs qui ne prennent pas en charge les requêtes "@media".
• Utilisez les requêtes "@media" pour les styles réactifs : utilisez les requêtes "@media" pour appliquer des styles réactifs en fonction sur la largeur de l'écran ou les dimensions de l'appareil.
• Définir la largeur de la fenêtre d'affichage par défaut : dans la balise méta de votre fenêtre d'affichage, spécifiez la largeur de la fenêtre d'affichage par défaut, généralement définie à "device-width".
• Évitez "device-width" dans les requêtes "@media" : au lieu d'utiliser "device-width" dans les conditions de règle "@media", utilisez des valeurs en pixels ou unités em.
• Considérez l'orientation de l'appareil : ajoutez des requêtes "@media" pour adresser différents appareils orientations, telles que portrait et paysage.

Exemple CSS :

Voici un exemple de CSS qui suit les meilleures pratiques mentionnées ci-dessus :

@media only screen and (min-width: 960px) {
  /* Styles for screens larger than 960px */
}

@media only screen and (device-width: 768px) {
  /* Styles for iPad screens */
}

@media only screen and (max-device-width: 480px) {
  /* Styles for mobile browsers smaller than 480px (iPhone) */
}

En suivant ces recommandations, vous pouvez vous assurer que votre conception réactive fonctionne comme prévu sur une large gamme d'appareils et de navigateurs.

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!