Media queries using CSS3

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 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 to the visitor.

In the case of responsive web design, 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 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 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.

Last updated:9/18/2014 1:24:10 PM


Leave Comment