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.