samedi 25 avril 2015

css media queries, one or many for mobile optimization


I know that using media queries the mobile first way should make the website faster on mobile devices. I wonder if there is a difference in using a lot of media queries, like this:

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

instead of using one big one for all the desktop styles, like this:

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

Which is better, for the performance, or does it matter? I think that the first approach is more easy to read when dealing with lots of styles.


Aucun commentaire:

Enregistrer un commentaire