Css Media Queries

A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive. A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Recognized media types

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the “Media” field in the description of each property is informative.

 

screen  Intended primarily for screens.

print  Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these                                     formats.)

all Suitable for all devices.

speech  Intended for speech synthesizers.

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

and

The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.

not

The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.

only

The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must also specify a media type.

, (comma)

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical oroperator.

 

 look at some examples of using media queries

 

/* If screen size is more than 600px wide */

@media screen and (min-width: 600px) {

body {
   background: red;
}

}


/* If screen size is wide, or less than 600px wide */

@media screen and (max-width: 600px) {

body {
   background: green;
}

}

/* When the browser's width is between 600 and 900px */

@media screen and (max-width: 900px) and (min-width: 600px) {

  body  {   
    background: yellow;
  }

}



/* When the width is between 600px and 900px or above 1100px */

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {

  div.example {
    background: tomato;
  }

}


/* if browser height is larger than the width */

@media only screen and (orientation: portrait) {

  body {
    background-color: gray;
  }

}


 /* if browser width is larger than the height */

 @media only screen and (orientation: landscape) {

body {
background-color: orange;
}

} 


/* The example below specifies font families in print */

@media print {
         p {font-family:georgia, times, serif;}
      }