CSS3 @media查询.pdfVIP

CSS3 @media查询 CSS3 @media 查询 实例 如果⽂档宽度⼩于 300 像素则修改背景演⽰(background-color): @media screen and (max-width: 300px) { body { background-color:lightblue; 尝试⼀下 » 定义和使⽤ 使⽤ @media 查询，你可以针对 同的媒体类型定义 同的样式。 @media 可以针对 同的屏幕尺⼨设置 同的样式，特别是如果你需要设置设计响应 式的页⾯，@media 是⾮常有⽤的。 当你重置浏览器⼤⼩的过程中，页⾯也会根据浏览器的宽度和⾼度重新渲染页⾯。 浏览器⽀持 表格中的数字表⽰⽀持 @media 规则的第⼀个浏览器的版本号。 Rule @media 2 1 9 3.5 4 .0 9 CSS 语法 @media mediatyp e and|not|only (media f eature) { CSS-Code; 你也可以针对 同的媒体使⽤ 同 stylesheets : link rel=stylesheet media=mediatyp e and|not|only (media f eature) href=mystylesheet.css 媒体类型 值 描述 all ⽤于所有设备 aural 已废弃。⽤于语⾳和声⾳合成器 braille 已废弃。 应⽤于盲⽂触摸式反馈设备 embossed 已废弃。 ⽤于打印的盲⼈印刷设备 handheld 已废弃。 ⽤于掌上设备或更⼩的装置，如PDA和⼩型电话 print ⽤于打印机和打印预览 projection 已废弃。 ⽤于投影设备 screen ⽤于电脑屏幕，平板电脑，智能⼿机等。 speech 应⽤于屏幕阅读器等发声设备 已废弃。 ⽤于固定的字符⽹格，如电报、终端设备和对字符有 tty 限制的便携设备 tv 已废弃。 ⽤于电视和⽹络电视 媒体功能 值 描述 aspect-ratio 定义输出设备中的页⾯可见区域宽度与⾼度的⽐率 color 定义输出设备每⼀组彩⾊原件的个数。如果 是彩⾊设备，则 值等于0 color-index 定义在输出设备的彩⾊查询表中的条⽬数。如果没有使⽤彩⾊ 查询表，则值等于0 device-aspect-ratio 定义输出设备的屏幕可见宽度与⾼度的⽐率。 device-height 定义输出设备的屏幕可见⾼度。 device-width 定义输出设备的屏幕可见宽度。 grid ⽤来查询输出设备是否使⽤栅格或点阵。 height 定义输出设备中的页⾯可见区域⾼度。 max-aspect-ratio 定义输出设备的屏幕可见宽度与⾼度的最⼤⽐率。 max-color 定义输出设备每⼀组彩⾊原件的最⼤个数。 max-color-index 定义在输出设备的彩⾊查询表中的最⼤条⽬数。 max-device-aspect- 定义输出设备的屏幕可见宽度与⾼度的最⼤⽐率。 ratio max-device-height 定义输出设备的屏幕可见的最⼤⾼度。 max-device-width 定义输出设备的屏幕最⼤可见宽度。 max-height 定义输出设备中的页⾯最⼤可见区域⾼度。 max-monochrome 定义在⼀个单⾊框架缓冲区中每像素包含的最⼤单⾊原件个 数。 max-reso