Media Queries

Media queries are a feature of CSS that enable webpage content to adapt to different screen sizes and resolutions. They are a fundamental part of responsive web design and are used to customize the appearance of websites for multiple devices.

Media queries may be inserted within a webpage's HTML or included in a separate .CSS file referenced by the webpage. Below is an example of a simple media query:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

The media query above activates if a user's browser window is 768 pixels wide or less. This could happen if you shrink your window on a desktop computer or if you are using a mobile device, such as a tablet, to view the webpage.

In responsive web design, media queries act as filters for different screen sizes. Like all modules within a cascading style sheet, the ones that appear further down the list override the ones above them. Therefore, the default styles are typically defined first within a CSS document, followed by the media queries for different screen sizes. For example, the desktop styles might be defined first, followed by a media query with styles for tablet users, followed by a media query designed for smartphone users. Styles may also be defined in the opposite order, which is considered "mobile first" development.

While min-width is by far the most common feature used in media queries, many others are available as well. Examples include min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation, and resolution. The resolution value, for instance, may be used to detect HiDPI displays (such as retina displays) and load high-resolution graphics instead of standard images.

Updated June 15, 2015

Definitions by TechTerms.com

The definition of Media Queries on this page is an original TechTerms.com definition. If you would like to reference this page or cite this definition, you can use the green citation links above.

The goal of TechTerms.com is to explain computer terminology in a way that is easy to understand. We strive for simplicity and accuracy with every definition we publish. If you have feedback about the Media Queries definition or would like to suggest a new technical term, please contact us.

Want to learn more tech terms? Subscribe to the daily or weekly newsletter and get featured terms and quizzes delivered to your inbox.

Sign up for the free TechTerms Newsletter

How often would you like to receive an email?

You can unsubscribe or change your frequency setting at any time using the links available in each email.

Questions? Please contact us.