Skip to content

Commit bf2b5e3

Browse files
tabatkinstabatkins
committed
[mediaqueries] Markup/wording tweaks.
--HG-- extra : rebase_source : a28e5bc3d25629997b5788d20d7c85b6173bb6ab
1 parent f39471a commit bf2b5e3

2 files changed

Lines changed: 46 additions & 51 deletions

File tree

‎mediaqueries/Overview.html‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1239,18 +1239,15 @@ <h3 class="heading settled heading" data-level=4.1 id=width><span class=secno>4.
12391239
devices with viewport (the part of the screen/paper where the
12401240
document is rendered) widths between 400 and 700 pixels:
12411241

1242-
<pre>@media screen and (min-width: 400px) and (max-width: 700px) { … }</pre> </div>
1242+
<pre>@media (min-width: 400px) and (max-width: 700px) { … }</pre> </div>
12431243

12441244
<div class=example>
12451245
This media query expresses that style sheet is usable on screen
12461246
and handheld devices if the width of the viewport is greater than
12471247
20em.
12481248

1249-
<pre>@media handheld and (min-width: 20em),
1250-
screen and (min-width: 20em) { … }
1251-
</pre>
1252-
<p> The <span class=css data-link-type=maybe title=em>em</span> value is relative to the initial value of
1253-
‘font-size’.
1249+
<pre>@media (min-width: 20em) { … }</pre>
1250+
<p> The <span class=css data-link-type=maybe title=em>em</span> value is relative to the initial value of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font-size title=font-size>font-size</a>.
12541251
</div>
12551252

12561253

@@ -1301,11 +1298,11 @@ <h3 class="heading settled heading" data-level=4.5 id=device-width><span class=s
13011298
<p> A specified <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> cannot be negative.
13021299

13031300
<div class=example>
1304-
<pre>@media screen and (device-width: 800px) { … }</pre>
1305-
<p> In the example above, the style sheet will apply only to screens
1306-
that currently displays exactly 800 horizontal pixels. The <span class=css data-link-type=maybe title=px>px</span> unit is
1307-
of the logical kind, as described in the <a href=#units>Units</a>
1308-
section.
1301+
<pre>@media (device-width &lt; 800px) { … }</pre>
1302+
<p> In the example above, the style sheet will apply only to screens
1303+
less than <span class=css data-link-type=maybe title=800px>800px</span> in length.
1304+
The <span class=css data-link-type=maybe title=px>px</span> unit is of the logical kind,
1305+
as described in the <a href=#units>Units</a> section.
13091306
</div>
13101307

13111308
<p class=note> Note: If a device can be used in multiple orientations,
@@ -1333,10 +1330,10 @@ <h3 class="heading settled heading" data-level=4.6 id=device-height><span class=
13331330
<p> A specified &lt;length&gt; cannot be negative.
13341331

13351332
<div class=example>
1336-
<pre>&lt;link rel="stylesheet" media="screen and (device-height: 600px)" /&gt;</pre>
1337-
<p> In the example above, the style sheet will apply only to screens
1338-
that have exactly 600 vertical pixels. Note that the definition of the
1339-
<span class=css data-link-type=maybe title=px>px</span> unit is the same as in other parts of CSS.
1333+
<pre>&lt;link rel="stylesheet" media="(device-height &gt; 600px)" /&gt;</pre>
1334+
<p> In the example above, the style sheet will apply only to screens
1335+
taller than 600 vertical pixels.
1336+
Note that the definition of the <span class=css data-link-type=maybe title=px>px</span> unit is the same as in other parts of CSS.
13401337
</div>
13411338

13421339

@@ -1353,10 +1350,10 @@ <h3 class="heading settled heading" data-level=4.7 id=device-aspect-ratio><span
13531350
pixels and 720 vertical pixels (commonly referred to as "16:9"), the
13541351
following Media Queries will all match the device:
13551352

1356-
<pre>@media screen and (device-aspect-ratio: 16/9) { … }
1357-
@media screen and (device-aspect-ratio: 32/18) { … }
1358-
@media screen and (device-aspect-ratio: 1280/720) { … }
1359-
@media screen and (device-aspect-ratio: 2560/1440) { … }
1353+
<pre>@media (device-aspect-ratio: 16/9) { … }
1354+
@media (device-aspect-ratio: 32/18) { … }
1355+
@media (device-aspect-ratio: 1280/720) { … }
1356+
@media (device-aspect-ratio: 2560/1440) { … }
13601357
</pre> </div>
13611358

13621359

@@ -1442,15 +1439,16 @@ <h3 class="heading settled heading" data-level=5.3 id=grid><span class=secno>5.3
14421439
grid</span><a class=self-link href=#grid></a></h3>
14431440

14441441
<table class="definition descdef mq" data-dfn-for=@media><tr><th>Name:<td><dfn class=css-code data-dfn-for=@media data-dfn-type=descriptor data-export="" id=descdef-grid>grid<a class=self-link href=#descdef-grid></a></dfn><tr><th>For:<td><a class=css-code data-link-type=at-rule href=http://dev.w3.org/csswg/css-conditional-3/#at-ruledef-media title=@media>@media</a><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-mq-boolean title="<mq-boolean>">&lt;mq-boolean&gt;</a><tr><th>Type:<td>discrete</table>
1445-
<p> The <a class=property data-link-type=propdesc href=#descdef-grid title=grid>grid</a> media feature is used to query whether the output device
1446-
is grid or bitmap. If the output device is grid-based (e.g., a "tty"
1447-
terminal, or a phone display with only one fixed font), the value will
1448-
be 1. Otherwise, the value will be 0.
1442+
<p> The <a class=property data-link-type=propdesc href=#descdef-grid title=grid>grid</a> media feature is used to query whether the output device is grid or bitmap.
1443+
If the output device is grid-based
1444+
(e.g., a "tty" terminal, or a phone display with only one fixed font),
1445+
the value will be 1.
1446+
Otherwise, the value will be 0.
14491447

14501448
<div class=example>
1451-
Here is an example:
1449+
Here is an example that detects a narrow console screen:
14521450

1453-
<pre>@media handheld and (grid) and (max-width: 15em) { … }
1451+
<pre>@media (grid) and (max-width: 15em) { … }
14541452
</pre> </div>
14551453

14561454
<h3 class="heading settled heading" data-level=5.4 id=updates><span class=secno>5.4 </span><span class=content>

‎mediaqueries/Overview.src.html‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -781,21 +781,17 @@ <h3 id="width">
781781
devices with viewport (the part of the screen/paper where the
782782
document is rendered) widths between 400 and 700 pixels:
783783

784-
<pre>@media screen and (min-width: 400px) and (max-width: 700px) { … }</pre>
784+
<pre>@media (min-width: 400px) and (max-width: 700px) { … }</pre>
785785
</div>
786786

787787
<div class="example">
788788
This media query expresses that style sheet is usable on screen
789789
and handheld devices if the width of the viewport is greater than
790790
20em.
791791

792-
<pre>
793-
@media handheld and (min-width: 20em),
794-
screen and (min-width: 20em) { … }
795-
</pre>
792+
<pre>@media (min-width: 20em) { … }</pre>
796793

797-
The ''em'' value is relative to the initial value of
798-
‘font-size’.
794+
The ''em'' value is relative to the initial value of 'font-size'.
799795
</div>
800796

801797

@@ -871,12 +867,12 @@ <h3 id="device-width">
871867
A specified <<length>> cannot be negative.
872868

873869
<div class="example">
874-
<pre>@media screen and (device-width: 800px) { … }</pre>
870+
<pre>@media (device-width < 800px) { … }</pre>
875871

876-
In the example above, the style sheet will apply only to screens
877-
that currently displays exactly 800 horizontal pixels. The ''px'' unit is
878-
of the logical kind, as described in the <a href="#units">Units</a>
879-
section.
872+
In the example above, the style sheet will apply only to screens
873+
less than ''800px'' in length.
874+
The ''px'' unit is of the logical kind,
875+
as described in the <a href="#units">Units</a> section.
880876
</div>
881877

882878
Note: If a device can be used in multiple orientations,
@@ -910,11 +906,11 @@ <h3 id="device-height">
910906
A specified &lt;length> cannot be negative.
911907

912908
<div class="example">
913-
<pre>&lt;link rel="stylesheet" media="screen and (device-height: 600px)" /&gt;</pre>
909+
<pre>&lt;link rel="stylesheet" media="(device-height > 600px)" /&gt;</pre>
914910

915-
In the example above, the style sheet will apply only to screens
916-
that have exactly 600 vertical pixels. Note that the definition of the
917-
''px'' unit is the same as in other parts of CSS.
911+
In the example above, the style sheet will apply only to screens
912+
taller than 600 vertical pixels.
913+
Note that the definition of the ''px'' unit is the same as in other parts of CSS.
918914
</div>
919915

920916

@@ -938,10 +934,10 @@ <h3 id='device-aspect-ratio'>
938934
following Media Queries will all match the device:
939935

940936
<pre>
941-
@media screen and (device-aspect-ratio: 16/9) { … }
942-
@media screen and (device-aspect-ratio: 32/18) { … }
943-
@media screen and (device-aspect-ratio: 1280/720) { … }
944-
@media screen and (device-aspect-ratio: 2560/1440) { … }
937+
@media (device-aspect-ratio: 16/9) { … }
938+
@media (device-aspect-ratio: 32/18) { … }
939+
@media (device-aspect-ratio: 1280/720) { … }
940+
@media (device-aspect-ratio: 2560/1440) { … }
945941
</pre>
946942
</div>
947943

@@ -1050,16 +1046,17 @@ <h3 id="grid">
10501046
Type: discrete
10511047
</pre>
10521048

1053-
The 'grid' media feature is used to query whether the output device
1054-
is grid or bitmap. If the output device is grid-based (e.g., a "tty"
1055-
terminal, or a phone display with only one fixed font), the value will
1056-
be 1. Otherwise, the value will be 0.
1049+
The 'grid' media feature is used to query whether the output device is grid or bitmap.
1050+
If the output device is grid-based
1051+
(e.g., a "tty" terminal, or a phone display with only one fixed font),
1052+
the value will be 1.
1053+
Otherwise, the value will be 0.
10571054

10581055
<div class="example">
1059-
Here is an example:
1056+
Here is an example that detects a narrow console screen:
10601057

10611058
<pre>
1062-
@media handheld and (grid) and (max-width: 15em) { … }
1059+
@media (grid) and (max-width: 15em) { … }
10631060
</pre>
10641061
</div>
10651062

0 commit comments

Comments
 (0)