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 :
![Media Queries]()
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
![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:
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.)