Reducing @media queries
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.