Media Queries in CSS

Media Queries

This article explains media queries, one of the best modules, or we can say applications, of CSS3.

Media Queries | Viewports

CSS2.1 has fewer built-in modules for providing extra functionalities to the media, graphics or animation in our web page or applications but in case of CSS3 there are a series of built in modules that can be directly used for providing functionalities to media or creating dynamic views in our design work.

Media Queries | Description

Media queries are one of those modules of CSS3 modules. Media queries provide several beneficial methodologies regarding design, some of these are as follows:

• Target specific designing
• Responsive web design
• Providing dynamic looks
• Better graphic options
• Animation
• Compatible with almost every browser

Media Queries | Performance

Media queries allow us to target specific CSS styles and designs and provide better graphics depending upon the two pillars:

• Display Capabilities
• Browser Compatibility

Media Queries | Example

With just a few lines of CSS, we are able to change the way content displays based upon the several factors, some major factors are :

Several other factors that can be included are:

• Resolution
• Device-Height
• Device- Width
• Monochrome
• Grid
• Scan
• Color-Index and so on.

Media Queries | Why…?

• You can use media queries functionality in the current scenario freely because it works with almost every operating system, platform and web browsers.
• It is easy to implement and perform.
• It crosses browser's responsive challenges
• Scalability in designing

 

Media Queries | Responsive Web Design

HTML4 and CSS2 are sufficient to provide some of the media functionalities, then the question arises:

Then why we are switching towards media query module through CSS3?

HtML4 and CSS2 supports media dependent style sheets implemented for styling purposes depending on the device capabilities. But a media query contains a media type and zero or more expressions that check for the conditions of specific media features.
Among the media features that can be directly used in media queries are:

• Width
• Height
• Color

By using media queries, presentation can be more detailed and well specified that can produce a better output result.

(In the next article about media queries I'll show how media queries work and detailed design through CSS3.)