Quelles sont les requêtes média les plus importantes à utiliser dans la création d'un design réactif mobile ?

Question

Il existe de nombreuses requêtes média différentes pour les tailles d'écran mobiles. Il peut être difficile de les prendre toutes en compte lors de la conception d'un site mobile réactif. Quelles sont les plus importantes à utiliser lors de la conception d'un site mobile ? J'ai trouvé cet article qui décrit assez bien les requêtes média disponibles : http://css-tricks.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 */
}

Answer 1

Je recommande de prendre après Bootstrap de Twitter avec juste ces quatre requêtes média :

/* 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 originale à cette question était tirée de la version 2 de Bootstrap. Bootstrap a depuis changé ses requêtes média dans la version 3. Notez qu'il n'y a pas de requête explicite pour les appareils inférieurs à 768px. Cette pratique est parfois appelée "mobile-first". Tout ce qui se trouve en dehors d'une requête média est appliqué à tous les appareils. Tout ce qui se trouve à l'intérieur d'un bloc de requête média étend et remplace ce qui est disponible globalement ainsi que les styles pour tous les petits appareils. Il s'agit d'une amélioration progressive de la conception réactive.

/* 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 Documentation de Bootstrap 3 .

Answer 2

1. Conception en pourcentages et initialement optimisée pour un écran 15"+.

2. Passez en revue les composants que vous souhaitez voir sur un téléphone. Conservez le contenu essentiel et supprimez les éléments qui ne fonctionnent pas ou qui encombrent le petit écran. Ces styles peuvent être contenus dans @media (max-width : 480px) { ... }

3. À mesure que l'on 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 vont pas très bien, entrez dans la console et déterminez les styles qui peuvent être modifiés ou les éléments qui doivent être redessinés ou supprimés. Marquez la largeur d'écran à laquelle ils se produisent et créez une requête média.

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

Si vous êtes à l'aise avec jQuery, vous pouvez ajouter

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

pour obtenir la taille actuelle de l'écran. Ajoutez quelques pixels supplémentaires pour faire bonne mesure.

Answer 3

Je suis d'accord avec l'approche de @Jonathan Tonge. Cela dépend vraiment de votre contenu. Certains sites nécessiteront beaucoup de media queries, d'autres peut-être seulement une ou deux.

Le code Twitter Bootstrap référencé par @cjlarose suppose que vous avez créé votre CSS principal pour un affichage d'une largeur comprise entre 980px et 1200px. Vous commencez donc essentiellement par le design de bureau et adaptez tous les autres à partir de celui-ci.

L'une des approches les plus populaires des media queries, et la façon dont je préfère procéder, consiste à commencer par "Le mobile d'abord" plutôt que du bureau vers l'extérieur. Utilisez des largeurs fluides pour commencer et n'ajustez les choses que lorsqu'elles commencent à avoir l'air bizarre. Voici quelques requêtes média que j'ai trouvées très utiles :

/* 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) {
}

Le plus important est que vous n'aurez peut-être pas besoin de tous ces éléments, ou que vous voudrez peut-être modifier les chiffres en fonction de votre contenu. Je ne pense pas qu'il existe de règles strictes concernant le nombre de points d'arrêt ou leur emplacement. Je suis en train de réaliser un site qui n'a besoin que d'un seul point d'arrêt parce que le contenu est assez simple, mais j'ai aussi réalisé des sites qui ressemblent davantage au code ci-dessus.

Je n'ai pas inclus le code de l'affichage rétina. C'est utile si vous remplacez des images à résolution normale par des images à haute résolution sur des écrans à haute résolution, mais sinon, ce n'est pas vraiment utile.

Answer 4

Je suis juste d'accord avec cjlarose. Il n'y a pas de réponse. Vous ne concevez pas en fonction de la taille des écrans. Une façon d'y penser est que vous concevez entre les tailles d'écran. Si tout est présenté en pourcentages et non en pixels, tout devrait bien se passer, quelle que soit la taille de l'écran.