Media queries is a CSS3 module and a W3C candidate recommendation since June 2012. The media queries module add the possibility to apply a style sheet to CSS only when a media query is evaluated as true. So, a media query has a condition that will be evaluated by the browser; you can compare this evaluation with an if…then statement.
A media query evaluates device's types and its features. Device's types are screen, speech, and print, among others, and its features are width, device-width, and resolution, among others.
Nowadays, the screen type and device's width play an important role in responsive web design. With the use of media queries, someone can restrict the CSS rules to a specified screen width, and thus, change the representation of a website with varying screen resolutions.
A typical media query will look like the following line of code:
@media condition { ... }For instance, the following media query sets the font color to black when viewport's...
