Cisco CloudCenter: Get the Hybrid IT Advantage

Media Query

Definition - 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.

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:

@media (max-width: 500px){
.left_sidebar {display: none; }
This definition was written in the context of Responsive Web Design
Share this:

Connect with us

Email Newsletter

Join thousands of others with our weekly newsletter

The 4th Era of IT Infrastructure: Superconverged Systems
The 4th Era of IT Infrastructure: Superconverged Systems:
Learn the benefits and limitations of the 3 generations of IT infrastructure – siloed, converged and hyperconverged – and discover how the 4th...
Approaches and Benefits of Network Virtualization
Approaches and Benefits of Network Virtualization:
Businesses today aspire to achieve a software-defined datacenter (SDDC) to enhance business agility and reduce operational complexity. However, the...
Free E-Book: Public Cloud Guide
Free E-Book: Public Cloud Guide:
This white paper is for leaders of Operations, Engineering, or Infrastructure teams who are creating or executing an IT roadmap.
Free Tool: Virtual Health Monitor
Free Tool: Virtual Health Monitor:
Virtual Health Monitor is a free virtualization monitoring and reporting tool for VMware, Hyper-V, RHEV, and XenServer environments.
Free 30 Day Trial – Turbonomic
Free 30 Day Trial – Turbonomic:
Turbonomic delivers an autonomic platform where virtual and cloud environments self-manage in real-time to assure application performance.