详解CSS3 Media Queries中媒体属性的使用

时间:2021-05-08

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

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

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

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

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

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

CSS Code复制内容到剪贴板
  • @mediaalland(color){...}
  • 向每个颜色单元至少有4个比特的设备应用样式表:

    CSS Code复制内容到剪贴板
  • @mediaalland(min-color:4){...}
  • 颜色索引(color-index)

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediaalland(color-index){...}
  • 向所有使用至少256个索引颜色的设备应用样式表:

    CSS Code复制内容到剪贴板
  • <linkrel="stylesheet"media="alland(min-color-index:256)"href="http://foo.bar.com/stylesheet.css"/>
  • 宽高比(aspect-ratio)

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediascreenand(min-aspect-ratio:1/1){...}
  • 这指定了宽高比或者1:1或者更大。换句话说,可视区域或者是正方形或者是宽屏。

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

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediascreenand(device-aspect-ratio:16/9),screenand(device-aspect-ratio:16/10){...}
  • 宽高比或者16:9或者16:10。

    设备高度(device-height)

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • <linkrel="stylesheet"media="screenand(max-device-width:799px)"/>
  • 设备宽度(device-width)

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

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

    网格(grid)

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediahandheldand(grid)and(max-width:15em){...}
  • 注意:“em” 在网格设备中有不同的意义;一个“em”的实际宽度不得而知,假设1em相当于一个网格单元的宽高。
    高度(height)

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

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

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

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediaalland(monochrome){...}
  • 向每个像素至少8比特的黑白设备应用样式表:

    CSS Code复制内容到剪贴板
  • @mediaalland(min-monochrome:8){...}
  • 方向(orientation)

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

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

    示例

    向竖屏设备应用样式表:

    CSS Code复制内容到剪贴板
  • @mediaalland(orientation:portrait){...}
  • 分辨率(resolution)

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

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediaprintand(min-resolution:300dpi){...}
  • 替换老旧的 (min-device-pixel-ratio: 2) 语法:

    CSS Code复制内容到剪贴板
  • @mediascreenand(min-resolution:2dppx){...}
  • 扫描(scan)

    值: progressive | interlace
    媒体:tv
    是否接受 min/max 前缀:否

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

    示例

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

    CSS Code复制内容到剪贴板
  • @mediatvand(scan:progressive){...}
  • 宽度(width)

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

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

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

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

    CSS Code复制内容到剪贴板
  • @mediahandheldand(min-width:20em),screenand(min-width:20em){...}
  • 这个媒体查询将向最小宽度8.5英寸的打印机应用样式表:

    CSS Code复制内容到剪贴板
  • <linkrel="stylesheet"media="printand(min-width:8.5in)"
  • href="http://foo.com/mystyle.css"/>
  • 这个查询适用于宽度在500px和800px之间的屏幕:

    CSS Code复制内容到剪贴板
  • @mediascreenand(min-width:500px)and(max-width:800px){...}

  • 实现响应式设计

    这个例子可以调整你的浏览器窗口尺寸,我们来具体看一下:
    Max Width
    下面的样式会在可视区域的宽度小于 600px 的时候被应用。

    CSS Code复制内容到剪贴板
  • @mediascreenand(max-width:600px){
  • .class{
  • background:#ccc;
  • }
  • }
  • 如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。

    CSS Code复制内容到剪贴板
  • <linkrel="stylesheet"media="screenand(max-width:600px)"href="small.css"/>
  • Min Width
    下面的样式会在可视区域的宽度大于 900px 的时候被应用。

    CSS Code复制内容到剪贴板
  • @mediascreenand(min-width:900px){
  • .class{
  • background:#666;
  • }
  • }
  • Multiple Media Queries
    你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

    CSS Code复制内容到剪贴板
  • @mediascreenand(min-width:600px)and(max-width:900px){
  • .class{
  • background:#333;
  • }
  • }
  • Device Width
    下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

    CSS Code复制内容到剪贴板
  • @mediascreenand(max-device-width:480px){
  • .class{
  • background:#000;
  • }
  • } 
  • For iPhone 4
    下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

    CSS Code复制内容到剪贴板
  • <linkrel="stylesheet"media="onlyscreenand(-webkit-min-device-pixel-ratio:2)"type="text/css"href="iphone4.css"/> 
  • For iPad
    你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse)

    CSS Code复制内容到剪贴板

  • <linkrel="stylesheet"media="alland(orientation:portrait)"href="portrait.css">
  • <linkrel="stylesheet"media="alland(orientation:landscape)"href="landscape.css"> 
  • 声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章