@media only screen and (min-width: 330px) {...}
/* If [device width] is greater than or equal to [330px], then do {...} */
/*-------------------------------------------------------*/
@media only screen and (max-width: 330px) {...}
/* If [device width] is less than or equal to [330px], then do {...} */
-------------------------------------------------------
/*
This means that max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule. Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule.
*/
/*-------------------------------------------------------*/
@media only screen and (max-width: 640px) {...}
@media only screen and (max-width: 479px) {...}
/*
I didn't realize it at the time but in the example above, the second media query actually trumps the first due to standard CSS inheritance rules. By rights, the first triggers any device with a width less than 640px and the second triggers any device with a width less than 479px. So if you truly want to trump the first, you need to make sure that you overwrite all CSS properties under the second condition.
*/
/*-------------------------------------------------------*/
/* A more succinct approach would be to do the following: */
@media only screen and (min-width:480px) and (max-width: 640px) {...}
@media only screen and (max-width: 479px) {...}
/*
The only difference is that we added a min-width condition to the first media query. This now separates the two queries so that one doesn't necessarily have to trump the other. The first is now saying anything greater than 480px and less than 640px, the other is simply stating anything less than 479px.
*/