mozilla
您的搜索结果

    CSS媒体查询

    媒体查询 包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

    语法

    媒体查询包含了一个媒体类型 和如CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。

    <!-- link元素中的CSS媒体查询 -->
    <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
    
    <!-- 样式表中的CSS媒体查询 -->
    <style>
    @media (max-width: 600px) {
      .facet_sidebar {
        display: none;
      }
    }
    </style>

    当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <link> 标签上带有媒体查询的样式表 仍将被下载 (只不过不会被应用)。

    在不使用 not 或 only 操作符的情况下,媒体类型是可选的,默认为 all

    逻辑操作符

    操作符 not,and 和 only 可以用来构建复杂的媒体查询
    and 操作符用来把多个 媒体属性 组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真。
    not 操作符用来对一条媒体查询的结果进行取反。
    only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
    若使用了 not only 操作符,必须明确指定一个媒体类型。

    你也可以将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真。相当于 or 操作符。

    and

    and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,即一个媒体属性与默认指定的 all媒体类型,可能像这样子:

    @media (min-width: 700px) { ... }

    如果你只想在横屏时应用这个,你可以使用 and 操作符合并媒体属性:

     (min-width: 700px) and (orientation: landscape) { ... }

    现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。如果,你仅想再电视媒体上应用,你可以使用 and 操作符合并媒体属性:

    @media tv and (min-width: 700px) and (orientation: landscape) { ... }

    现在,上面媒体查询仅在电视媒体上,可视区域不小于700像素宽度并且是横屏时有效。

    逗号分隔列表

    媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

    例如,如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式,你可以这样写:

    @media (min-width: 700px), handheld and (orientation: landscape) { ... }

    如上文,如果是一个800像素宽的屏幕设备,媒体语句将会返回真,因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真,尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地,如果我是一个500像素宽的横屏手持设备,尽管第一部分因为宽度问题而不匹配,第二部分仍会成功,因此整个媒体查询返回真。

    not

    not 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。例如,not 在下面的查询中最后被计算:

    @media not all and (monochrome) { ... }
    

    等价于:

    @media not (all and (monochrome)) { ... }
    

    而不是:

    @media (not all) and (monochrome) { ... }

    另一个例子,看下面的媒体查询:

    @media not screen and (color), print and (color)
    

    等价于:

    @media (not (screen and (color))), print and (color)

    only

    only 关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式:

    <link rel="stylesheet" media="only screen and (color)" href="example.css" />
    

    伪范式

    media_query_list: <media_query> [, <media_query> ]*
    media_query: [[only | not]? <media_type> [ and <expression> ]*]
      | <expression> [ and <expression> ]*
    expression: ( <media_feature> [: <value>]? )
    media_type: all | aural | braille | handheld | print |
      projection | screen | tty | tv | embossed
    media_feature: width | min-width | max-width
      | height | min-height | max-height
      | device-width | min-device-width | max-device-width
      | device-height | min-device-height | max-device-height
      | aspect-ratio | min-aspect-ratio | max-aspect-ratio
      | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
      | color | min-color | max-color
      | color-index | min-color-index | max-color-index
      | monochrome | min-monochrome | max-monochrome
      | resolution | min-resolution | max-resolution
      | scan | grid

    媒体查询是大小写不敏感的。包含未知媒体类型的查询通常返回假。

    注意: 表达式需要用圆括号。没有使用的会引起错误。

    媒体属性

    大多数媒体属性带有“min-”和“max-”前缀,用于表达“大于等于”和“小于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。

    注意:如果浏览器运行的设备上没有该属性值,包含这个属性值的表达式一般返回假。例如,在语音合成器上查询屏幕长宽比总是返回假。

    颜色(color)

    值: <color>
    媒体: visual
    是否接受 min/max 前缀:是

    指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0。

    注意:如果每个颜色单元具有不同数量的比特值,则使用最小的。例如,如果显示器为蓝色和红色提供5比特,而为绿色提供6比特,则认为每个颜色单元有5比特如果设备使用索引颜色,则使用颜色表中颜色单元的最小比特数。

    示例

    向所有能显示颜色的设备应用样式表:

    @media all and (color) { ... }
    

    向每个颜色单元至少有4个比特的设备应用样式表:

    @media all and (min-color: 4) { ... }
    

    颜色索引(color-index)

    <integer>
    媒体: visual
    是否接受 min/max 前缀:

    指定了输出设备中颜色查询表中的条目数量。

    示例

    向所有使用索引颜色的设备应用样式表,你可以这么做:

    @media all and (color-index) { ... }
    

    向所有使用至少256个索引颜色的设备应用样式表:

    <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
    

    宽高比(aspect-ratio)

    值:<ratio>
    媒体: visual, tactile
    是否接受 min/max 前缀:是

    描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

    示例

    下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。

    @media screen and (min-aspect-ratio: 1/1) { ... }

    这指定了宽高比或者1:1或者更大。换句话说,可视区域或者是正方形或者是宽屏。

    设备宽高比(device-aspect-ratio)

    值:<ratio>
    媒体:visual, tactile
    是否接受 min/max 前缀:是

    描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

    示例

    下面为宽屏设备选择了一个特殊的样式表。

    @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

    宽高比或者16:9或者16:10。

    设备高度(device-height)

    值:<length>
    媒体:visual, tactile
    是否接受 min/max 前缀:是

    描述了输出设备的高度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)。

    示例

    向显示在最大宽度800px的屏幕上的文档应用样式表,你可以这样做:

    <link rel="stylesheet" media="screen and (max-device-width: 799px)" />
    

    设备宽度(device-width)

    值:<length>
    媒体: visual, tactile
    是否接受 min/max 前缀:是

    描述了输出设备的宽度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)。

    网格(grid)

    值:<integer>
    媒体:all
    是否接受 min/max 前缀:

    判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0。

    示例

    向一个15字符宽度或更窄的手持设备应用样式:

    @media handheld and (grid) and (max-width: 15em) { ... }
    
    注意:“em” 在网格设备中有不同的意义;一个“em”的实际宽度不得而知,假设1em相当于一个网格单元的宽高。

    高度(height)

    值:<length>
    媒体:visual, tactile
    是否接受 min/max 前缀:

    height 媒体属性描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度。

    注意:用户调整窗口大小后,火狐浏览器会根据使用了widthheight属性的媒体查询来切换合适的样式表。

    黑白(monochrome)

    值:<integer>
    媒体: visual
    是否接受 min/max 前缀:是

    指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0。

    示例

    向所有黑白设备应用样式表:

    @media all and (monochrome) { ... }
    

    向每个像素至少8比特的黑白设备应用样式表:

    @media all and (min-monochrome: 8) { ... }
    

    方向(orientation)

    值:landscape | portrait
    媒体:visual
    是否接受 min/max 前缀:否

    指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式。

    示例

    向竖屏设备应用样式表:

    @media all and (orientation: portrait) { ... }

    分辨率(resolution)

    值: <resolution>
    媒体: bitmap
    是否接受 min/max 前缀:是

    指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

    示例

    为每英寸至多300点的打印机应用样式:

    @media print and (min-resolution: 300dpi) { ... }
    

    替换老旧的 (min-device-pixel-ratio: 2) 语法:

    @media screen and (min-resolution: 2dppx) { ... }

    扫描(scan)

    值: progressiveinterlace
    媒体:tv
    是否接受 min/max 前缀:否

    描述了电视输出设备的扫描过程。

    示例

    向以顺序方式扫描的电视机上应用样式表:

    @media tv and (scan: progressive) { ... }
    

    宽度(width)

    值: <length>
    媒体: visual, tactile
    是否接受 min/max 前缀:是

    width 媒体属性描述了输出设备渲染区域(如可视区域的宽度或打印机纸盒的宽度)的宽度。

    注意:用户调整窗口大小后,火狐浏览器会根据使用了widthheight属性的媒体查询来切换合适的样式表。

    示例

    如果你想向最小宽度20em的手持设备或屏幕应用样式表,你可以使用这样的查询:

    @media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
    

    这个媒体查询将向最小宽度8.5英寸的打印机应用样式表:

    <link rel="stylesheet" media="print and (min-width: 8.5in)"
        href="http://foo.com/mystyle.css" />
    

    这个查询适用于宽度在500px和800px之间的屏幕:

    @media screen and (min-width: 500px) and (max-width: 800px) { ... }
    

    Mozilla专有的媒体属性

    Mozilla 提供了几个Gecko网页排版引擎专有的媒体属性。这些属性中有些可能会被提议成官方媒体属性。

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-images-in-menus

    值: <integer>
    媒体: visual
    是否接受 min/max 前缀:否

    如果设备允许图片出现在菜单中,这个值是1,否则的话,这个值是0。 This corresponds to the :-moz-system-metric(images-in-menus) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-mac-graphite-theme

    值: <integer>
    媒体:visual

    是否接受 min/max 前缀:否

    If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

    This corresponds to the :-moz-system-metric(mac-graphite-theme) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-maemo-classic

    值: <integer>
    媒体: visual
    是否接受 min/max 前缀:否

    If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

    This corresponds to the :-moz-system-metric(maemo-classic) CSS pseudo-class.

    (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

    -moz-device-pixel-ratio

    值:<number>
    媒体: visual
    是否接受 min/max 前缀:是

    Gives the number of device pixels per CSS pixel.

    不要使用这个属性。

    Use the resolution feature with the dppx unit instead.

    -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

    Example:

    @media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
           (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
           (min-resolution: 2dppx),             /* The standard way */
           (min-resolution: 192dpi)             /* dppx fallback */ 

    See this CSSWG article for compatibility good practices regarding resolution and dppx.

    注意: This media feature is also implemented by Webkit as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

    (Firefox 25.0 / Thunderbird 25.0 / SeaMonkey 2.22)

    -moz-os-version

    Value: windows-xp | windows-vista | windows-win7 | windows-win8
    Media: visual
    Accepts min/max prefixes: no

    Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

    • windows-xp
    • windows-vista
    • windows-win7
    • windows-win8

    This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-scrollbar-end-backward

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(scrollbar-end-backward) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-scrollbar-end-forward

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(scrollbar-end-forward) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-scrollbar-start-backward

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(scrollbar-start-backward) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-scrollbar-start-forward

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(scrollbar-start-forward) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-scrollbar-thumb-proportional

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(scrollbar-thumb-proportional) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-touch-enabled

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(touch-enabled) CSS pseudo-class.

    Example

    You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-windows-classic

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

    This corresponds to the :-moz-system-metric(windows-classic) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-windows-compositor

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

    This corresponds to the :-moz-system-metric(windows-compositor) CSS pseudo-class.

    (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

    -moz-windows-default-theme

    Value: <integer>
    Media: visual
    Accepts min/max prefixes: no

    If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

    This corresponds to the :-moz-system-metric(windows-default-theme) CSS pseudo-class.

    (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

    -moz-windows-theme

    Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
    Media: visual
    Accepts min/max prefixes: no

    Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

    • aero
    • luna-blue
    • luna-olive
    • luna-silver
    • royale
    • generic
    • zune

    This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 21 3.5 (1.9.1) 9.0 9 4
    grid ? Not supported (grid media type is not supported) ? ? ?
    resolution ? 3.5 (1.9.1) supports <integer> values;
    8.0 (8.0) supports <number> values, as per the spec.
    ? ? ?
    scan ? Not supported (tv media type is not supported) ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) (Yes) ? (Yes) (Yes)

    其它

     
     
     
     
     
     
     
     
     

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, anjianshi, Nightingale, Wenbin, ZhaoMing
    最后编辑者: ziyunfei,