text.html

 
<p class="zw">我们可以使用两种或者更多的查询条件，来更加精准地命中使用11寸MacBook Air的用户。在查询条件中插入类似<code>and</code>、<code>not</code>和<code>only</code>这样的连接词就可以实现，如下所示。</p> 
<pre class="代码无行号"><code>@media screen 
and (min-width: 48rem) { 
[…]
}</code></pre> 
<p class="zw">这个CSS声明中的样式规则，只会在宽度大于48rem的设备上生效。而符合这个宽度规则的打印机设备，亦不会采用这段规则。</p> 
<p class="zw">在下面的例子中，样式规则只会在<code>device-height</code>值大于900px的屏幕设备上生效。</p> 
<pre class="代码无行号"><code>@media only screen 
and (min-device-height: 56.25rem) { 
[…]
}</code></pre> 
<p class="zw">我们可以使用<code>min-device-height</code>和<code>device-aspect-ratio</code>这样的媒体查询，来组成一个查询组合，从而实现对11寸MacBook Air的极精密和精准的匹配。</p> 
<pre class="代码无行号"><code>@media only screen 
and (min-device-height: 56.25rem) 
and (device-aspect-ratio: 16/10) { 
[…]
}</code></pre> 
<p class="zw">截至目前，所有的规则都是包含在一条查询中，样式只有在查询结果返回为真的时候才生效。如果我们想要两条查询，也许只是来区分下11寸MacBook Air的不同分辨率，我们只需要用逗号来对媒体查询做下分割，而分割开的两条查询只要有一条返回为真，包含的CSS规则都会生效。</p> 
<pre class="代码无行号"><code>@media only screen 
and (min-device-height: 56.25rem) 
and (device-aspect-ratio: 16/10), 
screen 
and (min-device-height: 37.5rem) 
and (device-aspect-ratio: 4/3) { 
[…]
}</code></pre>