Responsive design - Standard Breakpoint/Media queries for smartphone and tablet

Question

What are the standard width for smartphones and tablets when you code for responsive design. I looked into diffrent websites but I didn\'t seem to find any good templates for st

Answer 1

I always use percentages when coding responsive design elements - avoid using device-driven breakpoints as Skube stated in their comment on your question.

Answer 2

There is two way of thinking your CSS media querys.

First one is to go 'Desktop First'. That mean that your base CSS will aim at large screens and then your media query will overwrite your classes to adapt to smaller classes. Your CSS could go like this :

/* 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) {...}

The second approach is to go 'Mobile First'. That mean that your base CSS will aim at small screens like the IPhone 4. Then your media query will overwrite your classes to adapt to bigger screens. Here's and example :

/* 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){...}

If you really want to go into details and take advantage of the retina display, you will have to play with the pixel ratio. Take a look at this overkill css style sheet : media-queries-boilerplate.css. One of the nice thing to do with the retina display is to provide higher quality images to the client. The downside it that it take more bandwith and make the site slower.

I hope this help you.