Media Queries

What are Media Queries?

•Allows us to change our layouts to suit the exact need of different devices without changing the content.

•It is applied with the help of CSS3.

•Media queries are CSS extensions to media types that give us more control over rendering across different devices.

•Media query is a logical expression which is either true or false.

•CSS associated with media query is only applied if the expression is true.

What are Media Types?

•CSS can be used to specify how a document is presented in different media

•There are ten media types defined in CSS

–all : suitable for all devices.

–handheld : for handheld devices.

–screen :  for color computer screens.

–tv  : for television type devices. 

–aural : for speech synthesizer.

–braille : for braille tactile feed back devices.

–embossed : for paged braille printers.

–projection : for projected presentations .

–tty : for teletypes and terminals.

–print : for print material. 

Methods to specify Media for CSS

•First method:

–You can use a element in the head of your HTML document to specify the target media of an external style sheet.

Example:

rel=“stylesheet” href=“a.css” type=“type/css” media=“screen”/>

•Second method:

–You can use a stylesheetl?> element in the head of your XML document to specify the target media of an external style sheet.

Example:

stylesheet media=“screen” rel=“stylesheet” href=“example.css”?>

•Third method:

–You can specify the target medium within a CSS file using @media

Example:

@media screen

{

   body{color:blue;}

}

Media Query Syntax

Types Of Keywords

•and:

–You can use multiple expressions in a media query if you join them with “and “ keyword.

E.g.:

•Comma Separated:

–You can use multiple, comma-separated media queries.

–This comma act like an “or” keyword.

E.g.:

•not:

–You can use the not keyword in a media query if you want your CSS to be ignored by a specific device.

E.g.:

•not:

–You can use the not keyword in a media query if you want your CSS to be ignored by a specific device.

E.g.:

•only:

–You can use the only keyword in a media query if you want your CSS to be applied only to a specific device.

E.g.:

Targeting iPhone

•iPhone does not support hand held media type.

•Apple recommends targeting the iPhone using media queries.

  E.g.: