mozilla

比较版本

CSS媒体查询

更改版本

修订版 441661:

由 Nightingale 在 进行的修订 441661

修订版 441665:

由 Nightingale 在 进行的修订 441665

标题:
CSS媒体查询
CSS媒体查询
网址缩略名:
Web/Guide/CSS/媒体查询
Web/Guide/CSS/媒体查询
标签:
"css", "媒体查询", "media queries", "CSS Reference", "css3"
内容:

修订版 441661
修订版 441665
n8      <span class="seoSummary">媒体查询 包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体n8      <span class="seoSummary">媒体查询 包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体
>性来限制样式表范围的表达式。</span><a href="/en-US/docs/CSS/CSS3" title="/en-U>性来限制样式表范围的表达式。</span><a href="/en-US/docs/CSS/CSS3" title="/en-US
>S/docs/CSS/CSS3">CSS3</a>加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。>/docs/CSS/CSS3">CSS3</a>加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。
n14      <strong>媒体查询</strong>包含了一个<a class="internal" href="/en-US/n14      <strong>媒体查询</strong>包含了一个<a class="internal" href="/en-US/
>docs/CSS/@media" title="/en-US/docs/CSS/@media">媒体类型</a> 和如CSS3规范>docs/CSS/@media" title="/en-US/docs/CSS/@media">媒体类型</a> 和如CSS3规范
>中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或否=假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果>中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真
>为真,<strong>并且</strong>媒体查询中的所有表达式为真。>,<strong>并且</strong>媒体查询中的所有表达式为真。
n42      你也可以将多个媒体查询以逗号分隔合并;如果任何一个为真,整个媒体语句返回真。相当于 <code>or</code> 操n42      你也可以将多个媒体查询以逗号分隔排列;如果任何一个为真,整个媒体语句返回真。相当于 <code>or</code> 操
>作符。>作符。
n48      <code>and</code> 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,一个媒体属性n48      <code>and</code> 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,一个媒体属
>与默认指定的 <code>all</code>媒体类型可能这样子:>性与默认指定的 <code>all</code>媒体类型可能这样子:
n69      分隔列表n69      逗号分隔列表
n81      如上文,如果一个800像素宽的屏幕设备,媒体语句将会返回真,因为第一部分相当于 <code>@media all ann81      如上文,如果一个800像素宽的屏幕设备,媒体语句将会返回真,因为第一部分相当于 <code>@media all a
>d (min-width: 700px)</code> 将会应用于我的设备并且返回真,尽管我的屏幕媒体类型并不与第二部分的手持媒体>nd (min-width: 700px)</code> 将会应用于设备并且返回真,尽管我的屏幕媒体类型并不与第二部分的手持媒体
>类型相符。同样地,如果我是一个500像素宽的横屏手持设备,尽管第一部分因为宽度问题而不匹配,第二部分仍会成功,因此整个媒体查询返回>类型相符。同样地,如果我是一个500像素宽的横屏手持设备,尽管第一部分因为宽度问题而不匹配,第二部分仍会成功,因此整个媒体查询返回
>真。>真。
n87      <code>not</code> 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 <code>monochrn87      <code>not</code> 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 <code>monochr
>ome</code> 应用于彩色显示设备上或 一个600像素的屏幕应用于 <code>min-width: 700px</code>ome</code> 应用于彩色显示设备上或一个600像素的屏幕应用于 <code>min-width: 700px</code>
>> 属性查询上 )。在逗号媒体查询列表中 <code>not</code> 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 > 属性查询上 )。在逗号媒体查询列表中 <code>not</code> 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 <
><code>not</code> 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。例如,<code style="fon>code>not</code> 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。例如,<code style="font
>t-size: 14px;">not</code> <span style="line-height: 1.572;">在下面的查>-size: 14px;">not</code> <span style="line-height: 1.572;">在下面的查询
>询中最后被计算:</span>>中最后被计算:</span>
n261      宽高比或者16:9或者16:10n261      宽高比或者16:9或者16:10
n388    <h4 id="Example">n388    <h4 id=".E7.A4.BA.E4.BE.8B">
n403    <h3 id="scan">n403    <h3 id=".E6.89.AB.E6.8F.8F.EF.BC.88scan.EF.BC.89">
n414    <h4 id="Example">n414    <h4 id=".E7.A4.BA.E4.BE.8B">
n423    <h3 id="width">n423    <h3 id=".E5.AE.BD.E5.BA.A6.EF.BC.88width.EF.BC.89">
n432      <code>width</code> media feature describes the width of then432      <code>width</code> 媒体属性描述了输出设备渲染区域(如可视区域的宽度或打印机纸盒的宽度)的宽度。
> rendering surface of the output device (such as the width of the 
> document window, or the width of the page box on a printer). 
n435      <strong>Note:</strong> As the user resizes the window, Firen435      <strong>注意:</strong>用户调整窗口大小后,火狐浏览器会根据使用了<code>width</code>
>fox switches style sheets as appropriate based on media queries u>和<code>height</code>属性的媒体查询来切换合适的样式表。
>sing the <code>width</code> and <code>height</code> media feature 
>s. 
n438      Examplesn438      示例
439    </h4>
440    <p>439    </h4>
441      If you want to specify a style sheet for handheld devices, 440    <p>
>or screen devices with a width greater than 20em, you can use thi 
>s query: 
441      如果你想向最小宽度20em的手持设备或屏幕应用样式表,你可以使用这样的查询:
n447      This media query specifies a style sheet that applies to prn447      这个媒体查询将向最小宽度8.5英寸的打印机应用样式表:
>inted media wider than 8.5 inches: 
n454      This query specifies a style sheet that is usable when the n454      这个查询适用于宽度在500px和800px之间的屏幕:
>viewport is between 500 and 800 pixels wide: 
n460      Mozilla-specific media featuresn460      Mozilla专有的媒体属性
n738      Browser compatibilityn738      浏览器兼容性
n897      See alson897      其它
n901        <a class="external" href="http://www.w3.org/TR/css3-median901        <a class="external" href="http://www.w3.org/TR/css3-media
>queries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 m>queries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 
>edia query specification</a>>体查询规范</a>
902      </li>
903      <li>902      </li>
904        <a class="internal" href="/en-US/docs/CSS/@media" title="
>En/CSS/@media">Media types</a> 
905      </li>903      <li>
904        <a class="internal" href="/en-US/docs/CSS/@media" title="
 >En/CSS/@media">媒体类型</a>
906      <li>905      </li>
906      <li>
907        <a href="/en-US/docs/CSS/Using_media_queries_from_code" t907        <a href="/en-US/docs/CSS/Using_media_queries_from_code" t
>itle="en/CSS/Using media queries from code">Using media queries f>itle="en/CSS/Using media queries from code">用代码实现媒体查询</a>
>rom code</a> 
tt931    <div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-
 >bd10-327458d045bd">
932      &nbsp;
933    </div>

返回历史