Comment appliquer des styles CSS réactifs exclusivement aux appareils mobiles ?

Application exclusive de styles CSS réactifs sur les appareils mobiles

Lors de la création de styles CSS réactifs, il est crucial de s'assurer qu'ils sont appliqués uniquement aux appareils prévus. Si vous ciblez des appareils mobiles mais que vous rencontrez des difficultés pour les empêcher d'interférer avec la présentation du bureau, envisagez l'approche suivante.

Utiliser des plages de requêtes multimédias

Au lieu d'utiliser des points d'arrêt de requête multimédia uniques, utilisez une gamme de points d’arrêt. Cela vous permet de spécifier des plages de largeurs spécifiques pour lesquelles les styles mobiles doivent s'appliquer, tout en excluant d'autres appareils.

Voici un exemple de plage de requête multimédia qui cible les appareils dont la largeur est comprise entre 480 px et 1 024 px :

<code class="css">@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles go here */
}</code>

Définition de plages pour les tailles d'appareils courantes

Pour couvrir les tailles d'appareils les plus courantes, tenez compte des plages suivantes :

<code class="css">@media all and (min-width: 0px) and (max-width: 320px)
@media all and (min-width: 321px) and (max-width: 480px)
@media all and (min-width: 569px) and (max-width: 768px)
@media all and (min-width: 769px) and (max-width: 800px)
@media all and (min-width: 801px) and (max-width: 959px)
@media all and (min-width: 960px) and (max-width: 1024px)</code>

Utilisation d'unités EM ou %

Pour garantir vos styles s'adaptent bien quelle que soit la résolution de l'appareil, évitez d'utiliser des unités px. Optez plutôt pour des unités EM ou %. Les unités EM sont relatives à la taille de la police de l'élément parent, tandis que les unités % sont relatives à la largeur totale de l'élément.

Exemple de code

Voici une version mise à jour de votre code à l'aide du média Approche de plage de requête et unités EM :

<code class="css">/* Regular desktop styles */

/* Mobile only styles for devices between 480px and 1024px */
@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles using EM units */
}</code>

Ce code garantit que les styles mobiles sont appliqués exclusivement aux appareils dans la plage de largeur spécifiée tout en préservant la séparation des styles de bureau.

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!