媒体查询-金旭亮.PDFVIP

媒体查询 北京理工大学计算机学院 金旭亮 理解“媒体查询” 什么是“媒体查询”？ 媒体查询其实是一个字符串，它包容一个媒体类型（Media Types）， 配上一个或多个表达式（Expression）： @media screen and (max-device-width: 400px) { h1 { color: green } } 当浏览器发现当前显示网页的设备特性符合特定的媒体查 询条件，则此媒体查询所包容的样式规则被使用。 示例：MediaQueryDemo.html 实例说明： 当浏览器窗口大小改变时， 背景色会改变。 引例分析： 1. 在style元素中，使用多个 @media检测当前浏览器的宽度， 然后有选择地设置其body和h2元 素所应用的样式。 2. 这展示了媒体查询可以“检测当 前设备可显示尺寸”实现页面显 示效果切换。 通俗地理解“媒体查询” 媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。 可以将媒体查询想象成对浏览器的提问。如果浏览器回 答“是”，则应用指定样式；如果回答是“否”，则不 应用样式。 媒体查询有几种使用方式？ CSS 文件内 放在页面的style元素内，使用@media指令， 指明在特定的场景中使用特定的样式规则。 link元素中，支持使用media特性指定媒体查 Link元素 询表达式，从而在特定场景中加载特定的样式 表文件。 JavaScript代码 在JavaScript代码中，可以检测查询表达式值， 从而完成特定的工作。 方式一：样式表中的媒体查询 在样式表中，可以使用@media指令定义媒体查询： @media screen and (max-device-width: 400px) { h1 { color: green } } 可以使用CSS 的@import 指令在当前样式表中“按条件”引入其他样 式表： @import url(phone.css) screen and (max-width:360px); 使用CSS 的@import 方式会增加HTTP 请求（这会 影响加载速度），所以请谨慎使用该方法。 方式二：link元素中使用媒体查询 在网页中，可以使用link元素的media属性在特定的屏幕下装载 特定的样式表文件： link rel=stylesheet media=screen href=portraitscreen.css / 方式三：使用JavaScript代码调用媒体查询 if( window.styleMedia.matchMedium(“screen and (max-width:768px) ) ) { //…… } 这种方式用得不多。 媒体查询编写技巧 学会编写媒体查询 媒体查询的基本语法 @media media = only screen and (min-width:800px) { …… }