Quelles sont les requêtes médias les plus importantes à utiliser pour créer mobile responsive design?
Il y a beaucoup de requêtes média différentes pour les tailles d'écran mobiles. Il peut être accablant de les accueillir tous lors de la conception d'un site mobile responsive. Quels sont les plus importants à utiliser lors de la conception pour mobile? J'ai trouvé cet article qui décrit assez bien les requêtes des 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 */
}
3 réponses
je recommande de prendre après Bootstrap de Twitter juste avec ces quatre requêtes de 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 (ci-dessus) a été tirée de la version 2 de Bootstrap. Bootstrap a depuis modifié ses requêtes médias dans la version 3. Notez qu'il n'y a pas de requête explicite pour les périphériques plus petits que 768px. Cette pratique est parfois appelée " mobile-first. Tout ce qui est en dehors de n'importe quelle requête média est appliqué à tous les appareils. Tout ce qui se trouve dans un bloc de requête multimédia étend et remplace ce qui est disponible à l'échelle mondiale ainsi que les styles pour tous les petits appareils. 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) { ... }
Check it out on Bootstrap 3 docs.
conception en pourcentages et initialement optimisée pour un écran 15"+.
passez en revue les composants que vous voulez voir sur un téléphone - il suffit de garder le contenu essentiel et supprimer les éléments qui ne fonctionnent pas ou encombrer le petit écran. Ces styles peuvent être contenus dans @media (max-width: 480px) { ... }
comme les choses se déplacent à 10" ou moins, redessinez vos boutons et les composants interactifs pour les doigts plutôt que la souris. @Média (max-width: 767px) { ... }
Réduire la largeur de votre navigateur. Quand les choses ne semblent pas si bien, allez à la console et découvrez quels styles peuvent être changés ou des éléments qui doivent être redessinés ou enlevés. Marquez la largeur de l'écran à laquelle ils se produisent et créez une requête de médias.
a la fin, passez en revue vos requêtes Médias pour voir si certaines d'entre elles peuvent être regroupées (c'est-à-dire si vous avez une largeur de 750 et 767 pixels, vous pourriez aussi bien avec les combiner dans le 767).
si vous êtes à l'aise avec wjquery, vous pouvez ajouter
$(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 de Bootstrap Twitter référencé par @cjlarose suppose que vous avez construit votre CSS principal pour un affichage qui est entre 980px et 1200px de large, donc vous êtes essentiellement à partir de la conception du bureau et l'adaptation de tous les autres à partir de celui-ci.
je suis content de voir que Twitter a changé "mobile first" dans le Bootstrap 3. C'est l'une des approches les plus populaires pour questions des médias, et la façon dont je préfère le faire. Vous démarrez à partir de la plus petite taille plutôt que de l'ordinateur de bureau.
notez que votre site particulier peut avoir besoin de requêtes différentes de celles qui sont listées ici ou sur toute autre liste. vous devriez ajouter des requêtes comme votre contenu demandes, non basées sur un modèle défini.
voici quelques requêtes des médias que j'ai trouvé les plus utiles. Ce ne sont là 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 pouvez ne pas avoir besoin de tous ces, ou vous pourriez vouloir changer les nombres en fonction de à quoi ressemble votre contenu. Je ne pense pas qu'il y ait de règles très strictes concernant le nombre de points de rupture ou l'endroit où les placer. Je fais un site en ce moment qui se trouve à n'avoir besoin que d'un point de rupture parce que le contenu est assez simple, mais j'ai aussi 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 éteignez des images à résolution normale pour des images à haute résolution sur des écrans haute résolution, mais autrement ce n'est pas vraiment que utile.