web-dev-qa-db-fra.com

Quelles sont les requêtes multimédias les plus importantes à utiliser pour créer une conception adaptée aux mobiles?

Il existe de nombreuses requêtes multimédias différentes pour les tailles d'écran mobiles. Il peut être accablant 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 de médias 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 */
}
cssmobileresponsive-designmedia-queries
42
Matt

Je recommanderais de prendre après Bootstrap de Twitter avec seulement ces quatre requêtes multimé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) { ... }

Modifier: la réponse d'origine (ci-dessus) est tirée de Bootstrap version 2. Bootstrap a depuis changé leurs requêtes multimédias dans la version 3. Notez qu'il n'y a pas de requête explicite pour les appareils de taille inférieure à 768 pixels. Cette pratique est parfois appelée mobile-first. Tout ce qui se trouve en dehors de toute requête multimédia est appliqué à tous les appareils. Considérez-le comme une amélioration progressive pour une 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 .

85
cjlarose

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

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

  3. Alors que les choses passent à 10 "ou moins, redessinez vos boutons et 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 semblent pas si bonnes, accédez à la console et découvrez quels styles peuvent être modifiés ou les éléments qui doivent être repensés ou supprimés. Marquez à quelle largeur d'écran ils se produisent et créez une requête multimédia.

  5. À la fin, examinez vos requêtes multimédias pour voir si certaines d'entre elles peuvent être regroupées (c'est-à-dire si vous en avez une à 750 et 767 pixels de largeur, vous pourriez tout aussi bien les combiner dans le 767).

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

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

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

8
Jonathan Tonge

Le premier Twitter Bootstrap code référencé par @cjlarose suppose que vous avez construit votre CSS principal pour un affichage d'une largeur comprise entre 980 px et 1200 px, vous commencez donc essentiellement par la conception du bureau et l'adaptation tous les autres.

Je suis heureux de voir que Twitter est devenu "mobile first" in Bootstrap 3. C'est l'une des approches les plus populaires des requêtes multimédias, et la façon que je préfère pour le faire. Vous partez 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 qui y sont répertoriées ou sur toute autre liste. Vous devez ajouter des requêtes en tant que votre contenu demandes, non basées sur un modèle défini.

Voici quelques requêtes multimédias 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'aurez peut-être pas besoin de tout cela ou que vous souhaiterez peut-être modifier les chiffres en fonction de l'apparence de votre contenu. Je ne pense pas qu'il existe de règles très strictes sur le nombre ou l'endroit où placer vos points d'arrêt. Je fais un site en ce moment qui n'a besoin que d'un seul point d'arrêt parce que le contenu est assez simple, mais j'ai également fait des sites qui ressemblent plus au code ci-dessus.

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

5
nwalton