CSS & CSS3 Media Query – An Introduction

Media queries are simple filters that can be applied to CSS styles. They make it easy to change styles based on the characteristics of the device rendering the content, including the display type, width, height, orientation and even resolution.

CSS Print Media Query – CSS style for print

<link rel="stylesheet" href="print.css" media="print"

Different ways to use media query in css?

CSS3 Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, printer or create a responsive site.

The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

@media (query) {
  /* CSS Rules used when query matches */
}

While there are several different items we can query on, the ones used most often for responsive web design are min-width, max-width, min-height and max-height.

  <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
    <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
    <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
    <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
    <style>
      @media (min-width: 500px) and (max-width: 600px) {
        h1 {
          color: fuchsia;
        }

        .desc:after {
          content:" In fact, it's between 500px and 600px wide.";
        }
      }
    </style>

Below is an overview of most of the CSS3 media queries. You can find what queries your browser support and better support your devices.

 Table Reference – http://cssmediaqueries.com/overview.html