web-dev-qa-db-fra.com

Responsive design - Requêtes standard de points d'arrêt et de supports pour smartphone et tablette

Quelle est la largeur standard pour les smartphones et les tablettes lorsque vous codez pour un design réactif. J'ai consulté différents sites Web, mais je n'ai apparemment pas trouvé de bons modèles pour la largeur standard. Que faites-vous habituellement pour les points d'arrêt/médias lors du codage de la conception adaptative? 

Si quelqu'un a un bon modèle de résultats différents pour tablette/smartphone, etc., partagez-les! Merci!

responsive-design
11
user2945872

Il y a deux façons de penser à vos requêtes sur les médias CSS.

La première consiste à utiliser 'Desktop First'. Cela signifie que votre CSS de base visera les grands écrans, puis votre requête multimédia écrasera vos classes pour s’adapter aux 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 à passer au «mobile d’abord». Cela signifie que votre CSS de base visera les petits écrans tels que l'IPhone 4. Ensuite, votre requête multimédia écrasera vos classes pour s'adapter aux écrans plus grands. Voici et 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 tirer parti de l'affichage de la rétine, vous devrez jouer avec le rapport de pixels. Jetez un coup d’œil à cette feuille de style css overkill: media-queries-boilerplate.css . L’un des avantages de l’affichage de la rétine est de fournir des images de meilleure qualité au client. L'inconvénient est que cela prend plus de bande passante et rend le site plus lent.

J'espère que cela vous aidera.

22
Gab

J'utilise toujours des pourcentages lors du codage d'éléments de conception réactifs - évitez d'utiliser des points d'arrêt déterminés par les appareils, comme Skube l'a indiqué dans leurs commentaires sur votre question.

1
Xarus