Media queries are CSS3 modules which allow content to adapt to various screen resolutions, such as smartphones, tablets, and high definition screens.
To deliver different styles to different devices, media queries are an excellent way to achieve this, providing the best experience for each type of user. As a part of the CSS3 specification, media queries expand the role of the media attribute that controls how the styles are applied.
A media query comprises of one or more expressions and type of media involving features that result in true or false. Moreover, relevant style sheet or style rules are applied, following the regular cascading rules when a media query is true.
The following snippet is a very simple example which applies when the device width is greater than 500 px:
@media screen and (min-width: 500px)
{
/* some css here */
}