Media Query

Why Trust Techopedia

What Does Media Query Mean?

A media query is an HTML/CSS functionality that allows the content of a Web page to adapt to the type of media that the page is being rendered in, such as a computer screen or that of a phone or tablet. This is considered as a core technology for implementing responsive Web design and was recommended for implementation as a standard in June of 2012 together with other CSS3 functionalities.

Advertisements

Techopedia Explains Media Query

Media queries consist of a media type along with one or more expressions that conditionally check for certain media features, particularly that of screen sizes. The logical expressions in a media query can be either true or false; it is true if the media type of the query matches that of the media type of the device where the user agent (Web browser) is running on; otherwise, it is false. When the media query results to true, then the corresponding style rules specified will be applied, following normal cascading rules. It must be noted that, even if the query results to false, style sheets specified within the <link> tag are still downloaded, but are simply not applied.

Example using the HTML <link> tag:

<link rel="stylesheet" media="(max-width: 600px)" href="specific.css" />

Example using @media within the <style> tag:

<style>
@media (max-width: 500px){
.left_sidebar {display: none; }
}
</style>

Advertisements

Related Terms

Margaret Rouse
Editor

Margaret jest nagradzaną technical writerką, nauczycielką i wykładowczynią. Jest znana z tego, że potrafi w prostych słowach pzybliżyć złożone pojęcia techniczne słuchaczom ze świata biznesu. Od dwudziestu lat jej definicje pojęć z dziedziny IT są publikowane przez Que w encyklopedii terminów technologicznych, a także cytowane w artykułach ukazujących się w New York Times, w magazynie Time, USA Today, ZDNet, a także w magazynach PC i Discovery. Margaret dołączyła do zespołu Techopedii w roku 2011. Margaret lubi pomagać znaleźć wspólny język specjalistom ze świata biznesu i IT. W swojej pracy, jak sama mówi, buduje mosty między tymi dwiema domenami, w ten…