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

站长资源 2024/11/16 佚名

2 0 1

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

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

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

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

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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

颜色索引（color-index）

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

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

示例

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

宽高比（aspect-ratio）

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

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

示例

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

CSS Code复制内容到剪贴板

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

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

设备宽高比（device-aspect-ratio）

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

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

示例

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

CSS Code复制内容到剪贴板

@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的屏幕上的文档应用样式表，你可以这样做：

CSS Code复制内容到剪贴板

<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字符宽度或更窄的手持设备应用样式：

CSS Code复制内容到剪贴板

@media handheld and (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复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

方向（orientation）

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

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

示例

向竖屏设备应用样式表：

CSS Code复制内容到剪贴板

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

分辨率（resolution）

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

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

示例

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

扫描（scan）

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

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

示例

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

CSS Code复制内容到剪贴板

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

宽度（width）

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

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

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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

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

实现响应式设计

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

CSS Code复制内容到剪贴板

@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}

如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。

CSS Code复制内容到剪贴板

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。

CSS Code复制内容到剪贴板

@media screen and (min-width: 900px) {
.class {
background: #666;
}
}

Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

CSS Code复制内容到剪贴板

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

CSS Code复制内容到剪贴板

@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}

For iPhone 4
下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

CSS Code复制内容到剪贴板

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad
你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse)

CSS Code复制内容到剪贴板

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

CSS3,MediaQueries,媒体查询

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“详解CSS3 Media Queries中媒体属性的使用”

暂无评论...

www.sccsvx.com 神水资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

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

使用CSS3实现多列布局与多背景的技巧

CSS3媒体查询Media Queries基础学习教程

评论“详解CSS3 Media Queries中媒体属性的使用”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

使用CSS3实现多列布局与多背景的技巧

CSS3媒体查询Media Queries基础学习教程

评论“详解CSS3 Media Queries中媒体属性的使用”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存