media query

Media query is a CSS3 module allowing content to adapt to conditions such as screen resolutions.

Media query consists of a media type and at least one expression that limits the style sheets scope by using media features such as width, height, and color.

Media queries, added in CSS3, allow the presentation of content to fit to a specific devices’ screens like smartphone, tablet, computer desktop.

It became a W3C recommended standard and is a cornerstone technology of Responsive web design.

A media query consists of a media type and one or more expressions involving media features which resolve to either true or false.

The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Here is a simple example:

 @media screen and (min-width:500px) { ... }

The following link shows more details about media queries.

Please check the detailed tutorial about using media queries.

Take your time and browse our Bootstrap Admin Themes to find out more about CSS functionality.