CSS3第六章CSS3媒体查询幻灯片.pptVIP

第五章 CSS 媒体查询(media queries) 目标 掌握CSS媒体查询 理解响应式布局 真正的多终端应用！ CSS3 媒体查询(media queries) 什么是媒体查询? 媒体查询方式 有哪些媒体类型 有哪些媒体属性 媒体查询操作符 什么是媒体查询？ CSS中可以使用media属性使特定的style(样式)在指定媒体设备中显示。 CSS2规范中已经引入媒体查询 媒体设备有哪些类型？ PC浏览器？ 平板电脑？ 智能手机？ 媒体查询方式 通过HTML style元素查询 通过CSS代码查询 通过CSS @import语句查询 /* CSS代码媒体查询 */ @media print { body { font-size: 10pt }　 } @media screen { body { font-size: 13px }　} @media screen, print { body { line-height: 1.2 }} /* @import媒体查询 */ @import url(color.css) screen and (min-width:1000px); link href=css/print.css rel=stylesheet type=text/css media=print / 媒体查询方式 注意 link 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用） 媒体类型 (media type) aural (语音和语音合成器) braille (盲文触摸装置) handleld (手持设备) print (打印设备) projection (投影设备) screen (屏幕设备) tty (固定间距字符网格) tv (只能电视设备) embossed (分页盲文打印机) speech (语音朗诵) all (全部设备) 媒体属性 颜色 (Color) 指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。 设备宽度（device-width） 描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。 宽度（width） width 媒体属性描述了输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度。 黑白（monochrome） 指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。 @media all and (monochrome) /* 黑白设备 */ 媒体属性 网格（grid） 判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。 @media handheld and (grid) and (max-width: 15em) 方向（orientation） 指定了设备处于横屏[landscape]（宽度大于宽度）模式还是竖屏（高度大于宽度）模式。 @media all and (orientation: portrait) /* 竖屏 */ 分辨率（resolution） 指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。 媒体属性 注意 媒体属性还有很多，有点浏览器提供专有媒体属性 大多数媒体属性带有“min-”和“max-”前缀，用于表达“大于等于”和“小于等于” 媒体查询操作符 通过媒体查询操作符我们可以构造复杂的媒体查询。 and not only 逗号分隔的列表 媒体查询操作符 and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。 @media (min-width: 700px;) and (max-width: 1000px;){ div{ font-size:20px; } } /* 查询宽度在700-1000px 时，字体为20px */ 媒体查询操作符 not 操作符用来对一条媒体查询的结果进行取反。 @media not all and (monochrome) { } /* 不是黑白的全部设备 */ 媒体查询操作符 only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。 link rel=stylesheet media=only screen and (color) href=example.css / 媒体查询操作符 逗号分隔的列表