Comment puis-je utiliser les requêtes « @media » avec « min-width » et « max-width » pour un style cohérent entre navigateurs ?

Utilisation de @Media avec Min-Width et Max-Width

Dans le contexte du CSS, les requêtes @media vous permettent de cibler un écran spécifique tailles ou appareils avec des styles différents. Cependant, configurer les requêtes multimédias pour qu'elles fonctionnent de manière cohérente sur différents appareils et navigateurs peut s'avérer difficile.

Dans votre cas, vous avez défini trois règles @media :

@media screen and (min-width: 769px) {...}
@media screen and (min-device-width: 481px) and (max-device-width: 768px) {...}
@media only screen and (max-device-width: 480px) {...}

Pendant que cette configuration fonctionne sur un iPhone, on ne sait pas pourquoi cela ne fonctionne pas dans un navigateur. Un problème potentiel est que vous utilisez "device" dans la balise méta et "max-width" au lieu de "max-device-width" dans la troisième règle.

Cependant, l'approche recommandée consiste à définir styles CSS par défaut pour les anciens navigateurs qui ne prennent pas en charge les requêtes @media. Ensuite, utilisez les règles @media pour cibler des tailles d'écran ou des appareils spécifiques avec des styles supplémentaires. Par exemple :

/* Default styles for older browsers */
body {
  font-size: 14px;
}

/* Styles for screens wider than 960px */
@media only screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

/* Styles for mobile browsers narrower than 480px */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 12px;
  }
}

En suivant cette approche, vous pouvez garantir la compatibilité avec une plus 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!