A elaborative description of implementing media queries in our web sites

1. Media Queries
Presented by,
Midhun . L. Madhu

2. 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.

3. 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.

4. Methods to specify Media for CSS
• First method:
– You can use a <link> element in the head of your HTML document to
specify the target media of an external style sheet.
Example:
<link rel=“stylesheet” href=“a.css” type=“type/css” media=“screen”/>
• Second method:
– You can use a <?xml-stylesheetl?> element in the head of your XML
document to specify the target media of an external style sheet.
Example:
<?xml-stylesheet media=“screen” rel=“stylesheet” href=“example.css”?>

5. Methods to specify Media for CSS
• Third method:
– You can specify the target medium within a CSS file using @media
Example:
@media screen
{
body{color:blue;}
}

6. Media Query Syntax
<style>
@media screen and (color)
{
body{color:blue;}
}
</style>
Media type
keyword
Media feature

7. Media Feature List

8. Types Of Keywords
• and:
– You can use multiple expressions in a media query if you join them
with “and “ keyword.
E.g.:
<style>
@media screen and (minwidth:200px) and (max-width:600px)
{
body{color:blue;}
}
</style>

9. Types Of Keywords
• Comma Separated:
– You can use multiple, comma-separated media queries.
– This comma act like an “or” keyword.
E.g.:
<style>
@media screen and (minwidth:200px) or (max-width:600px)
{
body{color:blue;}
}
</style>

10. Types Of Keywords
• 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.:
<style>
@media not screen and (minwidth:200px)
{
body{color:blue;}
}
</style>

11. Types Of Keywords
• 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.:
<style>
@media only screen and (minwidth:200px)
{
body{color:blue;}
}
</style>

12. Targeting iPhone
• iPhone does not support hand held media type.
• Apple recommends targeting the iPhone using media queries.
E.g.:
<style type=“text/css”>
@media screen and (max-width:480px)
{
body{color:magenta;}
}
</style>

13. Browser Support for Media Queries

14. QUERIES??