媒体属性
大多数媒体属性带有“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 的时候被应用。
- @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 的时候被应用。
- @media screen and (min-width: 900px) {
- .class {
- background: #666;
- }
- }
Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
- @media screen and (min-width: 600px) and (max-width: 900px) {
- .class {
- background: #333;
- }
- }
Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）
- @media screen and (max-device-width: 480px) {
- .class {
- background: #000;
- }
- }
For iPhone 4
下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。
- <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">
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]