CSS Media Queries

CSS Media Queries

Why CSS Media Queries are Important?

One of the most important features of CSS is being able to define how a website or app is presented on different media or output devices.

Like a desktop screen, a mobile device, or a certain viewport width or height. Media queries allow us to do just that by applying CSS to elements dynamically based on conditions that test certain features of the output device.

We use logical expressions to test for certain things like viewport width, resolution or a device width and height to tailor our content to a wide range of devices without having to change any of the actually content because it's controlled entirely within the CSS. With just a few media queries, we can create subtle or drastic changes in the layout or appearance of a website.

That's why they're most commonly used in responsive web design to enhance the browsing experience of websites and apps on multiple devices and viewport sizes.

Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.

Linking and Importing Style Sheets with Media Queries

There are different ways to include media queries in a document. For example, we can create separate style sheets, then link them to the HTML document with the link tag, the same way we'd link any style sheet. We'll just need to make sure that they're linked below the main style sheets.

With these linked media queries, we're telling the browser, apply this style sheet only to a device that has a screen, and only if the browser window max-width is 800 pixels.

With above mentioned media query, we're telling the browser, apply this apply the mendia query only to a device that has a screen, and only if the browser window max-width is 600 pixels.

Logical operators

You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true.

The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

Apply only if the display is in landscape, you could use an and operator to chain the media features together.

Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied

The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query).

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM