SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices - without changing the content. This presentation explains what Media queries are, how to use them, how to target the iPhone and how to create flexible layouts.
15.
all suitable for all devices
aural for speech synthesizers
braille for Braille tactile feedback devices
embossed for paged Braille printers
handheld for handheld devices
print for print material
projection for projected presentations
screen for color computer screens
tty for teletypes and terminals
tv for television type devices
16.
There are five methods that can
be used to specify media
for style sheets.
18.
You can use a <link> element in
the head of your HTML document
to specify the target media of an
external style sheet.
<link rel="stylesheet"
href="a.css" type="text/css"
media=”screen" />
20.
You can use <?xml-stylesheet ?>
in the head of your XML document
to specify the target media of an
external style sheet.
<?xml-stylesheet
media="screen" rel="stylesheet"
href="example.css" ?>
22.
You can use @import in the head
if your HTML document to specify
the target media of an external
style sheet.
<style type="text/css"
media="screen">
@import "a.css";</style>
23.
Warning:
@import should be avoided as it
can cause issues in some
versions of Internet Explorer.
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
32.
Media queries are a CSS3
extension to media types that gives
us more control over rendering
across different devices.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
33.
A media query is a logical
expression that is either
true or false.
34.
The CSS associated with the
media query expression is only
applied to the device if the
expression is true.
36.
A media query generally consists of
a media type and zero or more
expressions.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Media type Expression
37.
An expression consists of zero or
more keywords and a media
feature.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Keyword Media feature
38.
Media features are placed within
brackets.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Media feature
39.
A media feature can be used
without a media type or keyword.
The media type is assumed to be “all”.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”(color)">
Media feature
40.
Most media features accept
“min-” or “max-” prefixes.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and
(min-height: 20em)">
41.
Media features can often be used
without a value.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
42.
Media features only accept single
values: one keyword, one number,
or a number with a unit identifier.
Except aspect-ratio and device-aspect-ration which require two numbers
(orientation: portrait)
(min-width: 20em)
(min-color: 2)
(device-aspect-ratio: 16/9)
46.
The CSS file in this example
should be applied to screen
devices that are capable of
representing color.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
47.
This same media enquiry could be
used with @import via HTML.
<style type="text/css"
media="screen and (color) ">
@import "a.css";</style>
48.
It could be used with
@import via CSS.
@import url("a.css")
screen and (color);
49.
Or using @media via CSS.
@media screen and (color)
{
body { color: blue; }
}
51.
You can use multiple
expressions in a media query if
you join them with the “and”
keyword.
52.
The CSS file in this example will be
applied by hand-held devices, but
only if the viewport width is at
> 20em and < 40em.
<link rel="stylesheet"
type="text/css" href="a.css"
media="handheld and (min-width:20em)
and (max-width:40em)">
54.
You can also use multiple,
comma-separated media queries.
The comma acts like an “or”
keyword.
55.
The CSS file in this example will be
applied to screen with color or
handheld devices with color.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color),
handheld and (color)">
57.
You can use the not keyword in a
media query if you want your CSS
to be ignored by a specific device.
58.
The CSS file in this example will be
applied to all devices except those
with color screens.
<link rel="stylesheet"
type="text/css" href="a.css"
media="not screen and (color)">
60.
The CSS file in this example will be
applied only to all devices with
color screens.
<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and (color)">
64.
Browsers that do not support
media queries should still
support the media type.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
65.
The “only” keyword is sometimes
used to hide CSS from devices
that do not support media queries,
but may read the media type.
<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and (color)">
67.
The iPhone does not support
handheld media type. Apple
recommends targeting the iPhone
using media queries.
68.
This rule will be applied by the
iPhone which has a maximum
device width (screen width) of
480px.
<link rel="stylesheet"
type="text/css" href="a.css"
media="only screen and
(max-device-width: 480px)" >