Home : Internet Terms : Media Queries Definition

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

Cite this definition:

https://techterms.com/definition/media_queries

TechTerms - The Tech Terms Computer Dictionary

This page contains a technical definiton of Media Queries. It explains in computing terminology what Media Queries means and is one of many Internet terms in the TechTerms dictionary.

All definitions on the TechTerms website are written to be technically accurate but also easy to understand. If you find this Media Queries definition to be helpful, you can reference it using the citation links above. If you think a term should be updated or added to the TechTerms dictionary, please email TechTerms!