---
title: "Media queries using CSS3"  
description: "In this blog I am trying to elucidate the media queries using CSS3.If you are not very much into developing and programming but more into design, then"  
author: "Vijay Shukla"  
published: 2013-03-25  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/469/media-queries-using-css3  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

# Media queries using CSS3

In this blog I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to elucidate the [media queries](https://www.mindstick.com/forum/158661/how-to-create-a-responsive-layout-that-adapts-to-different-screen-sizes-using-css-media-queries) using CSS3.

If you are not very much into developing and programming but more into design, then this concept may seem a little complicated for you. Media queries allow you to collect data about the visitor and utilize it to apply the CSS styles that can provide the best [user experience](https://www.mindstick.com/articles/12731/the-importance-of-feedback-to-the-user-experience) to the visitor.

In the case of [responsive web design](https://www.mindstick.com/blog/468/the-fluid-grid-concept-flexible-grid-for-responsive-web-design-in-css3), media queries are used for establishing the min-width parameter, which allows you to apply specific CSS styles according to the current browser size; hence [if the screen](https://answers.mindstick.com/qa/108738/what-if-the-screen-is-frozen) size drops below a certain size, a new CSS is applied instead of the previous one. To give you an example, this is how a default [media query](https://www.mindstick.com/forum/156487/what-is-media-query-in-css) might look like:

```
@media screen and (min-width: 500px) {   .mainContent {    float: left;  }   .image {    display: none  }
```

With media queries, designers can make multiple layouts using single HTML documents and selectively provide stylesheet based on different features such as browser size, orientation, resolution or color. Although media queries provide a great solution for developing highly responsive websites, there’s still a lot to work with in order to offer a complete solution for [mobile devices](https://yourviews.mindstick.com/view/85524/influence-of-mobile-devices-on-travel-and-tourism-experiences).

---

Original Source: https://www.mindstick.com/blog/469/media-queries-using-css3

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.