text.html

 
<p class="zw">CSS2中为我们介绍了媒体类型这个属性，它可以让我们具备指定不同样式表的能力，甚至可以为不同的设备指定不同的CSS样式表。下面的代码示例中，<code>screen.css</code>只会在设备屏幕中起作用，而<code>print.css</code>样式表只会在打印机中起作用。</p> 
<p class="zw">区别设置屏幕以及打印机的替代样式很简单，只需要加一个<code>media</code>属性即可。</p> 
<pre class="代码无行号"><code><link rel="stylesheet" media="screen" href="screen.css"> 
<link rel="stylesheet" media="print" href="print.css"></code></pre> 
<p class="zw">CSS3的媒体查询，让我们可以更加精准地定义在哪种情况下应用哪种样式。它通过查询表中的设备特征，来实现对不同设备的区别。</p> 
<p class="图"><img alt="1001.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/65.jpg"></p> 
<p class="zw">一个媒体查询包含了一个媒体类型（比如是屏幕设备还是打印机），以及一个设备或者屏幕属性（比如像屏幕尺寸、形状或者其他特征）。这个包含了两个或者更多查询的组合体，使我们能够在匹配到这些查询时候，让对应的样式声明生效。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_163">链接媒体查询</h3> 
<p class="zw">应用媒体查询有两种办法：第一种是在外联的样式表上指定特定的查询条件，比如指定大中小屏。我们将在<code>link</code>元素中增加查询条件，指定了一些样式规则只在最小宽度为<code>48rem</code>的屏幕设备中显示。</p> 
<p class="zw">利用这种方法，可以在第一个样式表中，给所有浏览器提供一个普适的样式，然后在紧接着的样式表上通过媒体查询，指定不同的展示样式。</p> 
<pre class="代码无行号"><code><link rel="stylesheet" media="screen and (min-width: 48rem)" 
href="medium.css"> 
<link rel="stylesheet" media="screen and (min-width: 64rem)" 
href="large.css"></code></pre> 
<p class="zw">这个方法初看起来似乎在区分不同媒体查询的时候非常有效，但是当心，浏览器会下载每一个外联的样式表，无论这些样式在当前设备中是否有效，这将会大大降低网站或者APP的性能。</p>