Quelles sont les bonnes valeurs de résolution à utiliser avec les media queries?

Récemment, j'ai été jouer avec les CSS Media Queries parce que c'est un excellent moyen de faire de mon site web de s'adapter à différentes tailles d'écran. J'ai l'intention de les mettre en œuvre dans la version live.

Ma question est: est-il recommandé de résolution de valeurs à laquelle les modifications de mise en page?

OriginalL'auteur Sven | 2012-07-08

  1. 25

    Voir cet article pour un modèle '320' - par Andy Clarke, il est utilisé par de nombreux développeurs et designers: http://www.stuffandnonsense.co.uk/blog/about/this_is_the_new_320_and_up

    Si vous faites défiler vers le bas pour les requêtes de média section, vous allez voir qu'ils utilisent cinq CSS3 Media Query incréments (480, 600, 768, 992 et 1382px). Généralement je m'en tiens à la juste 4 (480, 600, 768, 1024).

    Pour expliquer les plages:

    min-width: 480px: Cible les appareils mobiles en mode paysage et

    min-width: 600px: Objectifs de tablettes en mode portrait et

    min-width: 768px: Objectifs de tablettes en mode paysage et

    min-width: 1024px: Objectifs de la vue du bureau

    Et en général, je vais avoir mon mobile en mode portrait CSS au début (d'où le terme "320").

    Démarrer avec le mobile d'abord, puis développez votre fenêtre jusqu'à ce que la conception des pauses ou est de mauvaise qualité, ajouter un point d'arrêt... répéter.
    Moins est plus: je le fais dans l'autre sens, commencer avec un réactif de pourcentage en fonction de la vue du bureau et ajouter des exceptions pour mobile et tablette (généralement juste en jouant sur la grille, comme le style de toutes les colonnes de largeur

    OriginalL'auteur Suvi Vignarajah

  2. 4

    Je voudrais seulement ajouter de Suvi de la réponse.

    Conception adaptative s'applique médias requêtes ciblées résolutions cependant, avec le Responsive Design, vous êtes libre d'ajouter les points d'arrêt où vous sentez que cela est nécessaire.

    Il n'y a pas de règle quant au nombre de points d'arrêt d'une page devrait avoir, mais on devrait être ajouté là où la mise en page des pauses. L'objectif est de s'assurer que la conception et le contenu des flux joliment quelle que soit la largeur de la fenêtre d'affichage.

    Je pense que ce post vous donne un bon aperçu:

    http://www.williamwalker.me/blog/an-introduction-to-responsive-design.html

    OriginalL'auteur williamium

  3. 3

    Essayer celui-ci avec écran retina

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

    Espère que vous êtes bien

    OriginalL'auteur Mo.

  4. 1

    J'ai écrit cette solution:

    /* screens range */
@screen-s-max:    20em;         /* 320px  */
@screen-min:      20.063em;     /* 321px  */
@screen-max:      40em;         /* 640px  */
@screen-m-min:    40.063em;     /* 641px  */
@screen-m-max:    64em;         /* 1024px  */
@screen-l-min:    64.063em;     /* 1025px  */
@screen-l-max:    90em;         /* 1440px  */
@screen-xl-min:   90.063em;     /* 1441px  */
@screen-xl-max:   120em;        /* 1920px  */
@screen-xxl-min:  120.063em;    /*  1921px  */
/*
0----- smallmobile -----320-----  mobile  -----640-----  tablet  -----1024-----  notebook  -----1440----- desktop -----1920----- wide
*/
@onlyScreen: ~"only screen";
@smallmobile: ~"(max-width: @{screen-s-max})";
@mobile: ~"(min-width: @{screen-s-max}) and (max-width: @{screen-max})";
@tablet: ~"(min-width: @{screen-m-min}) and (max-width: @{screen-m-max})";
@notebook: ~"(min-width: @{screen-l-min}) and (max-width: @{screen-l-max})";
@desktop: ~"(min-width: @{screen-xl-min}) and (max-width: @{screen-xl-max})";
@wide: ~"(min-width: @{screen-xxl-min})";
@portrait: ~"(orientation:portrait)";
@landscape: ~"(orientation:landscape)";
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
~"only screen and (min--moz-device-pixel-ratio: 1.5)",
~"only screen and (-o-min-device-pixel-ratio: 3/2)",
~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile-and-more: ~"(min-width: @{screen-min})";
@tablet-and-more: ~"(min-width: @{screen-m-min})";
@notebook-and-more: ~"(min-width: @{screen-l-min})";
@desktop-and-more: ~"(min-width: @{screen-xl-min})"; 
/*
syntax example
@media @onlyScreen and @tablet and @portrait , @notebook and @landscape, @mobile and @landscape{
body{
opacity: 0.8;
}
}
*/

    Comme illustré dans l'exemple de syntaxe, vous pouvez combiner toutes ces variables et d'obtenir des complexes media query. L'utilisation de "et" ET de la logique de l'opérateur et la virgule pour OU. Vous pouvez combiner les différentes résolutions d'écran, orientation de l'écran (portrait/paysage) et de la rétine ou les périphériques.

    Ce code est également facilement configurable cause vous pouvez modifier/ajouter/supprimer des écrans de la gamme de valeurs pour gérer les différentes résolutions d'écran.

    OriginalL'auteur Marconi