《CSS3第六章CSS3媒体查询》由会员分享，可在线阅读，更多相关《CSS3第六章CSS3媒体查询（19页珍藏版）》请在金锄头文库上搜索。
1、,第五章 CSS 媒体查询 (media queries),目标,掌握CSS媒体查询 理解响应式布局,真正的多终端应用！,CSS3 媒体查询(media queries),什么是媒体查询? 媒体查询方式 有哪些媒体类型 有哪些媒体属性 媒体查询操作符,什么是媒体查询？,CSS中可以使用media属性使特定的style(样式)在指定媒体设备中显示。 CSS2规范中已经引入媒体查询 媒体设备有哪些类型？,PC浏览器？ 平板电脑？ 智能手机？,媒体查询方式,通过HTML style元素查询 通过CSS代码查询 通过CSS import语句查询,/* CSS代码媒体查询 */ media print
2、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);,媒体查询方式,注意 标签上带有媒体查询的样式表 仍将被下载 （只不过不会被应用）,媒体类型 (media type),aural (语音和语音合成器) braille (盲文触摸装置) handleld (手持设备) print (打印设备) projectio
3、n (投影设备) screen (屏幕设备) tty (固定间距字符网格) tv (只能电视设备) embossed (分页盲文打印机) speech (语音朗诵) all (全部设备),媒体属性,颜色 (Color) 指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。 设备宽度（device-width） 描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。 宽度（width） width 媒体属性描述了输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度。 黑白（monochrome） 指定了一个黑白（灰度）设备每个像素的比特数。如果
4、不是黑白设备，值为0。 media all and (monochrome) /* 黑白设备 */,媒体属性,网格（grid） 判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。 media handheld and (grid) and (max-width: 15em) 方向（orientation） 指定了设备处于横屏landscape（宽度大于宽度）模式还是竖屏（高度大于宽度）模式。 media all and (orientation: portrait) /* 竖屏 */ 分辨率（resolution） 指定
5、输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。,媒体属性,注意 媒体属性还有很多，有点浏览器提供专有媒体属性 大多数媒体属性带有“min-”和“max-”前缀，用于表达“大于等于”和“小于等于”,媒体查询操作符,通过媒体查询操作符我们可以构造复杂的媒体查询。 and not only 逗号分隔的列表,媒体查询操作符,and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。,media (min-width: 700px;) and (max-width: 1000px;) div font
6、-size:20px; /* 查询宽度在700-1000px 时，字体为20px */,媒体查询操作符,not 操作符用来对一条媒体查询的结果进行取反。,media not all and (monochrome) /* 不是黑白的全部设备 */,媒体查询操作符,only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。,媒体查询操作符,逗号分隔的列表 只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。,media (min-width: 700px) , handheld and (orientation: landscape) /*在最小宽度为700像素或是横屏的手持设备上应用*/,媒体查询冲突？,当媒体查询冲突的时候 按CSS默认优先级规则后者覆盖了前者,媒体查询操作符,注意 在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。 若使用了 not 或 only 操作符，必须明确指定一个媒体类型。 媒体查询浏览器支持情况 IE8 及以下版本(不支持) IE9+ Chrome 5+ Opera 10+ Firefox 3.6+ Safari 4+,响应式布局,什么是响应式布局？,总结,
