Reducing @media queries

In my webpage, I have the following @media queries:

```
/ Smartphones (iPhone 3GS/4 and others; portrait and landscape) /
@media only screen and (min-width: 320px) and (max-width: 480px){
html {
font-size: 60%;
}
}

/ iPhone 5 (portrait and landscape) /
@media only screen and (min-width: 320px) and (max-width: 568px){
html {
font-size: 60%;
}
}

/ iPhone 6 (portrait and landscape) /
@media only screen and (min-width: 375px) and (max-width: 667px){
html {
font-size: 60%;
}
}

/ iPhone 6 Plus (portrait) /
@media only screen and (min-width: 414px) and (max-width: 736px) and (orientation : portrait){
html {
font-size: 60%;
}
}

/ Other smartphones with smaller screen (portrait and landscape) /
@media only screen and (max-width : 319px){
html {
font-size: 50%;
}
}

/ iPads 1/2 iPad Mini (portrait and landscape) /
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio : 1) {
html {
font-size: 90%;
}
}

/ iPad 3/4 (portrait and landscape) /
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio : 2) {
html {
font-size: 62.5%;
}
}

/ Google Nexus 10 (portrait) /
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : portrait) {
html {
font-size: 100%;
}
}

/ Google Nexus 7 (portrait) /
@media only screen and (min-device-width : 604px) and (max-device-width : 966px) and (orientation : portrait) {
html {
font-size: 100%;
}
}

/ Google Nexus 7 2 (portrait and landscape) /
@media only screen and (min-device-width : 600px) and (max-device-width : 960px) {
html {
font-size: 100%;
}
}

/ Desktops and laptops /
@media only screen and (min-width : 1224px) {
html {
font-size: 100%;
}
}

/ Large screens /
@media

I would recommend a more generic approach, for example, I use a lot the Twitter’s Bootstrap variant from Nicholas Cerminara.
While your CSS looks like supports every device appropriately in terms of maintainability it is burdensome. For example most of the iPhone rules can be group into one. The same for the iPad and Nexus tablets.

If you take into consideration a responsive and mobile first styles approach, you can use media queries to only accommodate the styles that doesn’t fix into the mobile environment.

For example, the font size default value could be 60%. So this style doesn’t need to be written in the mobile media queries section, just in the desktop and other sizes. Your styles could be reduced to:

font-size: 60%;
/* Smartphones (iPhone portrait and landscape) */
@media only screen and (min-width: 320px) and (max-width: 480px){ 
    html {
        /* font-size: 60% is the default now */
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    html {
        font-size: 90%;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    html {
        font-size: 120%;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    html {
        font-size: 200%;
    }
}

And still covers, (if all others style and tags are properly architectured for responsive design) all previous requirements.

StackExchange Code Review Q#74915, answer score: 2