adaptive breakpoints

                                          /* Desktop First */
                                          
                                          
/* 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 :


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