Media queries allow CSS styles to be applied conditionally based on characteristics of the device viewing the content, like screen width. They provide a way to target specific devices and change layouts without changing the HTML. The document discusses the syntax of media queries, including using media types, features, expressions, and keywords. It provides examples of using media queries to load different style sheets or apply different CSS rules for different screen widths.
18. 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
19. There are five methods that can
be used to specify media
for style sheets.
21. 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" />
23. 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" ?>
25. 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>
26. 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/
35. 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)">
36. A media query is a logical
expression that is either
true or false.
37. The CSS associated with the
media query expression is only
applied to the device if the
expression is true.
39. 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
40. 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
41. Media features are placed within
brackets.
<link rel="stylesheet"
type="text/css" href="a.css"
media=”screen and (color)">
Media feature
42. 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
43. Most media features accept
“min-” or “max-” prefixes.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and
(min-height: 20em)">
44. Media features can often be used
without a value.
<link rel="stylesheet"
type="text/css" href="a.css"
media="screen and (color)">
45. 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)
49. 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)">
50. This same media enquiry could be
used with @import via HTML.
<style type="text/css"
media="screen and (color) ">
@import "a.css";</style>
51. It could be used with
@import via CSS.
@import url("a.css")
screen and (color);
52. Or using @media via CSS.
@media screen and (color)
{
body { color: blue; }
}
54. You can use multiple
expressions in a media query if
you join them with the “and”
keyword.
55. 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)">
57. You can also use multiple,
comma-separated media queries.
The comma acts like an “or”
keyword.
58. 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)">
60. You can use the not keyword in a
media query if you want your CSS
to be ignored by a specific device.
61. 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)">
63. 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)">
67. 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)">
68. 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)">
70. The iPhone does not support
handheld media type. Apple
recommends targeting the iPhone
using media queries.
71. 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)" >