Responsive design - Standard point d'arrêt/Media queries pour smartphone et tablette

Ce sont la largeur standard pour les smartphones et les tablettes lorsque vous code pour le responsive design. J'ai regardé sur différent sites, mais je n'ai pas l'air de trouver tout bon modèles de pour de largeur standard. Que faites-vous les gars faire pour point d'arrêt/mediaqueries lors du codage du responsive design?

Si quelqu'un a un bon modèle de diffrent resultions pour tablette/smartphone etc merci de les partager! Merci!

  • Éviter un dispositif piloté par les points d'arrêt; laissez le contenu & conception de déterminer les points d'arrêt.
InformationsquelleAutor user2945872 | 2013-11-30
  1. 22

    Il y a deux façon de penser votre CSS media des requêtes sur.

    Première est d'aller au Bureau "d'Abord". Cela signifie que votre base de CSS visera à de grands écrans, et ensuite à votre requête de média écrasera vos classes pour s'adapter à des classes plus petites. Votre CSS pourrait aller comme ceci :

    /* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

    La deuxième approche consiste à aller du "Mobile First". Cela signifie que votre base de CSS, aura pour but de les petits écrans, comme l'IPhone 4. Ensuite, votre media query remplacer vos cours à s'adapter à de plus grands écrans. Voici l'exemple :

    /* Smartphones (portrait) ----------- */

/* Ipad2 (portrait) ----------- */
@media only screen and (min-width : 768px){...}

/* Ipad2 (paysage) ----------- */
@media only screen and (min-width : 1024px){...}

/* Ordi (Petit) ----------- */
@media only screen and (min-width : 1224px){...}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1824px){...}

    Si vous voulez vraiment entrer dans les détails et prendre avantage de l'écran retina, vous aurez à jouer avec le ratio de pixel. Jetez un oeil à ce les excès de feuille de style css : media-queries-standard.css. L'une des chose sympa à faire avec l'écran retina est de fournir des images de qualité pour le client. L'inconvénient c'prendre plus de bande passante et de rendre le site plus lent.

    J'espère que cela vous aidera.

    InformationsquelleAutor Gab
  2. 1

    J'ai toujours utiliser des pourcentages pour le codage d'responsive design elements - évitez d'utiliser l'appareil piloté par les points d'arrêt Skube a déclaré dans son commentaire sur votre question.

    • À l'aide de pourcentages est grande, mais la plupart du temps vous avez besoin de fixer un minimum et un maximum. Il est assez difficile de créer un site qui va regarder aussi grande sur l'IPhone que sur un 1920x1080 moniteur. Avancée des feuilles de style CSS sera pourcentage d'utilisation avec point d'arrêt pour permettre une vraiment une mise en page adaptative.
    InformationsquelleAutor Xarus