Quelles sont les requêtes média les plus importantes à utiliser pour créer un design réactif mobile?

Il existe de nombreuses requêtes sur les médias pour les tailles d’écran mobiles. Il peut être écrasant de les accueillir tous lors de la conception d’un site mobile réactif. Quels sont les plus importants à utiliser lors de la conception pour mobile? J’ai trouvé cet article qui décrit très bien les requêtes multimédia disponibles: http://css-sortingcks.com/snippets/css/media-queries-for-standard-devices/ .

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Je recommande de prendre après le Bootstrap de Twitter avec seulement ces quatre requêtes de médias:

 /* Landscape phones and down */ @media (max-width: 480px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Large desktop */ @media (min-width: 1200px) { ... } 

Edit: La réponse d’origine (ci-dessus) est issue de la version 2 de Bootstrap. Depuis, Bootstrap a modifié ses requêtes multimédias dans la version 3. Notez qu’il n’y a pas de requête explicite pour les périphériques inférieurs à 768px. Cette pratique est parfois appelée mobile-first. Tout ce qui est en dehors de toute requête multimédia est appliqué à tous les périphériques. Tout ce qui se trouve dans un bloc de requête multimédia étend et remplace ce qui est disponible au niveau mondial ainsi que les styles pour tous les périphériques plus petits. Pensez-y comme une amélioration progressive pour un design réactif.

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { ... } 

Découvrez-le sur les documents de Bootstrap 3 .

  1. Conception en pourcentages et initialement optimisé pour un écran de 15 “+.

  2. Vérifiez les composants que vous voulez voir sur un téléphone – conservez simplement le contenu essentiel et supprimez les éléments qui ne fonctionnent pas ou encombrent le petit écran. Ces styles peuvent être contenus dans @media (max-width: 480px) {…}

  3. Au fur et à mesure que la situation passe à 10 “ou moins, redessinez vos boutons et vos composants interactifs pour les doigts plutôt que pour la souris. @Media (max-width: 767px) {…}

  4. Réduisez la largeur de votre navigateur. Lorsque les choses ne sont pas aussi belles, accédez à la console et déterminez quels styles peuvent être modifiés ou quels éléments doivent être repensés ou supprimés. Marquez la largeur d’écran à laquelle ils se produisent et créez une requête multimédia.

  5. À la fin, passez en revue vos requêtes multimédia pour voir si certaines d’entre elles peuvent être regroupées (par exemple, si vous en avez une à une largeur de 750 et 767 pixels, vous pourriez tout aussi bien les combiner dans le 767).

Si vous êtes à l’aise avec jQuery, vous pouvez append

 $(window).resize(function(){ console.log($(window).width()); }); 

pour obtenir la taille d’écran actuelle. Ajoutez quelques pixels supplémentaires pour une bonne mesure.

Le premier code Twitter Bootstrap référencé par @cjlarose suppose que vous avez créé votre code CSS principal pour un écran d’une largeur comprise entre 980 et 1200 pixels. Vous commencez donc essentiellement par la conception de bureau et en adaptant tous les autres.

Je suis ravi de voir que Twitter a été remplacé par «mobile first» dans Bootstrap 3. C’est l’une des approches les plus populaires pour les requêtes médias et la façon dont je préfère le faire. Vous commencez à partir de la plus petite taille plutôt que du bureau.

Notez que votre site particulier peut nécessiter des requêtes différentes de celles répertoriées ici ou sur toute autre liste. Vous devez append des requêtes à la demande de votre contenu , et non sur un modèle défini.

Voici quelques questions que j’ai trouvées les plus utiles. Ce ne sont que quelques exemples:

 /* Start with baseline CSS, for the smallest browsers. Sometimes I put this into a separate css file and load it first. These are the "mobile first" styles. */ ... /* Then progressively add bigger sizes from small to large */ /* Smartphones start somewhere around here */ @media (min-width: 300px) { } /* You might do landscape phones here if your content seems to need it */ @media (min-width: 450px) { } /* Starting into tablets somewhere in here */ @media (min-width: 600px) { } /* Perhaps bigger tablets */ @media (min-width: 750px) { } /* Desktop screen or landscape tablet */ @media (min-width: 900px) { } /* A bit bigger if you need some adjustments around here */ @media (min-width: 1100px) { } /* Widescreens */ @media (min-width: 1500px) { } 

La chose la plus importante est que vous n’avez peut-être pas besoin de tous ces éléments ou que vous souhaitiez modifier les chiffres en fonction de votre contenu. Je ne pense pas qu’il existe des règles vraiment ssortingctes quant au nombre ou à l’endroit où placer vos points d’arrêt. Je fais actuellement un site qui ne nécessite qu’un seul point d’arrêt, car le contenu est assez simple, mais j’ai également réalisé des sites qui ressemblent plus au code ci-dessus.

Je n’ai pas ajouté le code d’affichage de la rétine. C’est utile si vous changez des images en résolution normale pour des images haute résolution sur des écrans haute résolution, mais sinon, ce n’est pas vraiment utile.