Skip to content

Commit 77976d3

Browse files
doyoedoyoe
committed
update media-queries width condition
1 parent ca584ce commit 77976d3

File tree

3 files changed

+65
-36
lines changed

3 files changed

+65
-36
lines changed

‎appendix/media-types.htm

+13-7
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,9 @@ <h2 class="tit">媒体类型 Media Types</h2>
5858
</tr>
5959
</thead>
6060
<tbody>
61-
<tr>
62-
<td>all</td>
63-
<td>CSS2</td>
64-
<td>所有浏览器</td>
65-
<td>用于所有媒体设备类型</td>
66-
</tr>
6761
<tr>
6862
<td>aural</td>
69-
<td>CSS2</td>
63+
<td>CSS2不推荐使用</td>
7064
<td>Opera</td>
7165
<td>用于语音和音乐合成器</td>
7266
</tr>
@@ -118,6 +112,18 @@ <h2 class="tit">媒体类型 Media Types</h2>
118112
<td>Opera</td>
119113
<td>用于凸点字符（盲文）印刷设备</td>
120114
</tr>
115+
<tr>
116+
<td>speech</td>
117+
<td>CSS2</td>
118+
<td>Opera</td>
119+
<td>用于语音类型</td>
120+
</tr>
121+
<tr>
122+
<td>all</td>
123+
<td>CSS2</td>
124+
<td>所有浏览器</td>
125+
<td>用于所有媒体设备类型</td>
126+
</tr>
121127
</tbody>
122128
</table>
123129
</div>

‎properties/media-queries/index.htm

+6-5
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
<h1 class="tit">CSS Media Queries Module</h1>
4242
<ul class="info">
4343
<li>CSS媒体查询</li>
44+
<li>媒体：视觉</li>
4445
</ul>
4546
<!-- 插入浏览器信息 -->
4647
</section>
@@ -60,7 +61,7 @@ <h2 class="tit">说明：</h2>
6061
<strong>通过不同的媒体类型和条件定义样式表规则。</strong>
6162
<ul>
6263
<li>媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。</li>
63-
<li>媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width</li>
64+
<li>媒体查询的大部分媒体特性都接受<code class="incode">min</code>和<code class="incode">max</code>用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width</li>
6465
<li>
6566
<p>媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。</p>
6667
<div class="gquote">
@@ -80,10 +81,10 @@ <h2 class="tit">媒体特性 Media Features</h2>
8081
<table class="g-data">
8182
<thead>
8283
<tr>
83-
<th>Media Features<br />媒体特性</th>
84-
<th>Value<br />取值</th>
85-
<th>Accepts min/max<br />接受min/max</th>
86-
<th>Description<br />简介</th>
84+
<th>媒体特性</th>
85+
<th>取值</th>
86+
<th>接受min/max</th>
87+
<th>描述</th>
8788
</tr>
8889
</thead>
8990
<tbody>

‎properties/media-queries/width.htm

+46-24
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,14 @@ <h1 class="tit">Media Queries: width</h1>
5151
<section id="syntax" class="g-mod g-attr">
5252
<h2 class="tit">语法：</h2>
5353
<div class="cont">
54-
<p><strong>width</strong>：<a href="../../values/length/index.htm">&lt;length&gt;</a></p>
54+
<p><strong>width</strong>：<a href="../../values/length/length.htm">&lt;length&gt;</a></p>
5555
</div>
5656
</section>
5757
<section id="value" class="g-mod g-attr">
5858
<h2 class="tit">取值：</h2>
5959
<div class="cont">
6060
<dl>
61-
<dt><a href="../../values/length/index.htm">&lt;length&gt;</a>：</dt>
61+
<dt><a href="../../values/length/length.htm">&lt;length&gt;</a>：</dt>
6262
<dd>用长度值来定义宽度。不允许负值</dd>
6363
</dl>
6464
</div>
@@ -68,14 +68,16 @@ <h2 class="tit">说明：</h2>
6868
<div class="cont">
6969
<strong>定义输出设备中的页面可见区域宽度。</strong>
7070
<ul>
71-
<li>与<a href="../dimension/width.htm">盒模型width</a>不同，<a href="width.htm">媒体特性width</a>的取值只能是<a href="../../values/length/index.htm">&lt;length&gt;</a>。</li>
72-
<li>本特性接受min和max前缀，因此可以派生出<em class="g-color-light">min-width</em>和<em class="g-color-light">max-width</em>两个媒体特性。</li>
73-
<li class="gquote">
74-
<p class="gquote-tit"><strong>简单列举几个应用示例：</strong></p>
75-
<blockquote class="gquote-cont"><pre><code>@media screen and (width){ … }
76-
@import url(example.css) screen and (width:800px);
77-
&lt;link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" /&gt;
78-
&lt;?xml-stylesheet media="not screen and (width:800px)" rel="stylesheet" href="example.css" ?&gt;</code></pre></blockquote>
71+
<li>与<a href="../dimension/width.htm">盒模型width</a>不同，<a href="width.htm">媒体特性width</a>的取值只能是<a href="../../values/length/length.htm">&lt;length&gt;</a>。</li>
72+
<li>本特性接受min和max前缀，因此可以派生出<em class="g-color-light">min-width</em>和<em class="g-color-light">max-width</em>两个媒体特性。
73+
<div class="gquote">
74+
75+
<p class="gquote-tit"><strong>简单列举几个应用示例：</strong></p>
76+
<blockquote class="gquote-cont"><pre><code>@media screen and (width){ … }
77+
@import url(example.css) screen and (width:800px);
78+
&lt;link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" /&gt;
79+
&lt;?xml-stylesheet media="not screen and (width:800px)" rel="stylesheet" href="example.css" ?&gt;</code></pre></blockquote>
80+
</div>
7981
</li>
8082
</ul>
8183
</div>
@@ -91,29 +93,49 @@ <h2 class="tit">兼容性：</h2>
9193
<table class="g-data">
9294
<thead>
9395
<tr>
94-
<th><a href="#title" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th>
95-
<th><span class="browser-ie">IE</span></th>
96-
<th><span class="browser-firefox">Firefox</span></th>
97-
<th><span class="browser-safari">Safari</span></th>
98-
<th><span class="browser-chrome">Chrome</span></th>
99-
<th><span class="browser-opera">Opera</span></th>
96+
<th>Values</th>
97+
<th>IE</th>
98+
<th>Firefox</th>
99+
<th>Chrome</th>
100+
<th>Safari</th>
101+
<th>Opera</th>
102+
<th>iOS Safari</th>
103+
<th>Android Browser</th>
104+
<th>Android Chrome</th>
100105
</tr>
101106
</thead>
102107
<tbody>
103108
<tr>
104-
<th>较早版本</th>
105-
<td class="unsupport">6-8</td>
106-
<td rowspan="2" class="support">4</td>
107-
<td rowspan="2" class="support">5.1.7</td>
108-
<td rowspan="2" class="support">13</td>
109-
<td rowspan="2" class="support">11.5</td>
109+
<td rowspan="3"><strong>Basic Support</strong></td>
110+
<td class="unsupport">6.0-8.0</td>
111+
<td class="unsupport">2.0-3.0</td>
112+
<td class="partsupport">4.0-25.0<sup><a href="#support1">#1</a></sup></td>
113+
<td class="partsupport">6.0<sup><a href="#support1">#1</a></sup></td>
114+
<td class="support" rowspan="3">15.0+</td>
115+
<td class="partsupport">6.0-6.1<sup><a href="#support1">#1</a></sup></td>
116+
<td class="partsupport">2.1-4.3<sup><a href="#support1">#1</a></sup></td>
117+
<td class="partsupport">18.0-24.0<sup><a href="#support1">#1</a></sup></td>
110118
</tr>
111119
<tr>
112-
<th>较近版本</th>
113-
<td class="support">9</td>
120+
<td class="partsupport">9.0<sup><a href="#support1">#1</a> <a href="#support2">#2</a></sup></td>
121+
<td class="partsupport">3.5-9.0<sup><a href="#support3">#3</a></sup></td>
122+
<td class="support" rowspan="2">26.0+</td>
123+
<td class="support" rowspan="2">6.1+</td>
124+
<td class="support" rowspan="2">7.0+</td>
125+
<td class="support" rowspan="2">4.4+</td>
126+
<td class="support" rowspan="2">25.0+</td>
127+
</tr>
128+
<tr>
129+
<td class="partsupport">10.0-11.0<sup><a href="#support1">#1</a></sup></td>
130+
<td class="support">10.0+</td>
114131
</tr>
115132
</tbody>
116133
</table>
134+
<ol class="support-info">
135+
<li id="support1">不支持嵌套媒体查询。</li>
136+
<li id="support2">使用width作为媒体查询条件，是包含滚动条在内的</li>
137+
<li id="support3">支持min-width但却无效。</li>
138+
</ol>
117139
</div>
118140
</section>
119141
<section id="example" class="g-mod g-attr">

0 commit comments

Comments
 (0)