最近一直没网,好不容易有网络了,大概了解了下,媒体查询的东西,css3的部分,下面是从网上查到的信息,一起看看吧。
其实我了解的媒体查询就是 :我们的网页能够让用户 在 不同尺寸的移动设备上面都有很好的用户体验,
作为CSS3规范的一部分,媒体查询扩展了media属性(控制您的样式应用方式)的角色。例如,多年来人们常常使用一种独立的样式表,通过指定media="print"来打印网页。媒体查询将这一理念提升到了更高层次,允许设计人员基于各种不同的设备属性(比如屏幕宽度、方向等)来确定目标样式。图1-3演示了媒体查询的实际应用。它们显示了相同网页在桌面浏览器中、平板电脑上和iPod touch上查看的效果。
图1. 当在桌面上查看时,该网页拥有一种两栏布局。
在桌面版本中,该网页拥有一种固定宽度、两栏的布局。但当在平板电脑上查看相同页面时,边栏将移动到主要内容下方。
<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 649px)" >
图2. Media Queries对话框
当在iPod touch中查看时,菜单会重新排列,图像会缩小。使用媒体查询为每种设备提供了不同的样式。
图3. 媒体查询重新设置页面的样式,以适应小得多的屏幕的限制。
媒体查询的一个简单示例可能如下所示:
<link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 400px)" >
在此示例中,将媒体查询添加到了<link>标记中。在后面将会看到,您也可以在样式表中使用媒体查询。media属性是该查询实际所在的地方。这个示例如下所示:
only screen and (max-width: 400px)
该示例的含义应该很明显:仅将此样式表应用到拥有屏幕的设备,并且仅在浏览器窗口的宽度不超过400像素时应用。
媒体查询支持Internet Explorer (IE) 9及更高版本、Firefox 3.5及更高版本、Safari 3及更高版本、Opera 7及更高版本,以及大部分现代智能电话和其他基于屏幕的设备。
表1. 用于设置媒体查询中的条件的媒体功能
功能 |
值 |
最大/最小值 |
描述 |
width |
长度 |
是 |
显示区域的宽度 |
height |
长度 |
是 |
显示区域的高度 |
device-width |
长度 |
是 |
设备的宽度 |
device-height |
长度 |
是 |
设备的高度 |
orientation |
portrait或landscape |
否 |
设备的方向 |
aspect-ratio |
高宽比(宽/高) |
是 |
设备的宽高比,使用由1个斜杠分开的两个整数表示(比如16/9) |
device-aspect-ratio |
高宽比(宽/高) |
是 |
设备宽度与设备高度的比率 |
color |
整数 |
是 |
每种颜色成分的位数(如果不是颜色,该值为0) |
color-index |
整数 |
是 |
输出设备的颜色查找表中的项数 |
monochrome |
整数 |
是 |
单色镇缓冲区中每像素的位数(如果不是单色,该值为0) |
resolution |
分辨率 |
是 |
输出设备的像素密度,表示为整数后跟dpi(每英寸点数)或dpcm(每厘米点数) |
scan |
progressive或interlace |
否 |
TV设备使用的扫描过程 |
grid |
0或1 |
否 |
如果设置为1,设备基于网格,比如电传类型的终端或仅有一种固定字体的电话显示设备(所有其他设备均为0) |
表1中的前5项功能(width、height、device-width、device-height和orientation)是最有用的。您可以为大部分功能添加min-和max-作为前缀,以表示最小和最大值,比如min-width和max-width。表1中的“最大值/最小值”列表是哪些功能可通过此方式修改。
width、device-width和viewport
媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机,它们之间的区别很容易理解:width和height指浏览器视区的尺寸,而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器,所以width和height是您需要使用的度量方法。
图4展示了iPod touch通常如何显示前面插图中的示例页面。
图4. 默认情况下,现代移动设备会缩放网页来适合所估计的视区。
即使附加到页面上的样式表使用媒体查询,依据min-width和max-width的值来提供不同样式,iPod touch会忽略这些样式并显示桌面版本,因为它的视区被视为980像素宽。
更让人混淆的是,iPhone、iPod touch和iPad在计算宽度时不会考虑方向,而其他设备会。
幸运的是,这种混淆情形有一个简单的解决方案。苹果公司设计了一个新的<meta>标记,它已被其他移动设备制造商广泛采用,已合并到可能会被万维网联盟(W3C)批准的规范中。要为支持媒体查询的所有设备提供公平的机会,只需向每个网页的<head>添加以下这行代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度。而且,它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样,您可以在媒体查询中安全地使用width,因为您知道它的用途与您所想的相同。
注意:许多移动设备(最显著的就是iPhone 4和iPad 2)拥有高分辨率的显示屏,具有比桌面或平板显示器高得多的像素密度。这不会影响您在CSS中计算像素大小的方式。CSS规范要求,如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大,浏览器应该重新调节像素值。一些开发人员现在将像素度量方法称为CSS像素。
如何编写媒体查询
要将媒体查询添加到media属性中,您可以使用表1中的媒体功能设置一个或多个条件。与CSS属性一样,在一个冒号后指定媒体功能的值。每个条件包含在圆括号中,使用关键字and添加到媒体声明中。例如:
media="screen and (min-width: 401px) and (max-width: 600px)"
媒体查询是布尔值:它们要么为true,要么为false。如果整条语句为true,那么将应用样式表。如果为false,将忽略样式表。所以当使用上述查询时,所有部分必须为true,才会应用样式表。换句话说,它将仅适用于401到600像素宽的屏幕。
一些媒体功能(比如color、monochrome和grid)可用作条件,而无需指定一个值。例如,以下语句适用于所有彩色显示器:
media="screen and (color)"
指定备用功能
没有or关键词可用于指定备用的媒体功能。相反,可以将备用功能以逗号分割列表的形式列出,比如:
media="screen and (min-width: 769px), print and (min-width: 6in)"
这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备。
指定否定条件
要指定否定条件,可以在媒体声明中添加关键字not,比如:
media="not screen and (monochrome)"
不能在单个条件前使用not。该关键字必须位于声明的开头,而且它会否定整个声明。所以,上面的示例会应用于除单色屏幕外的所有设备。
向早期浏览器隐藏媒体查询
媒体查询规范还提供了关键字only,它用于向早期浏览器隐藏媒体查询。类似于not,该关键字必须位于声明的开头。例如:
media="only screen and (min-width: 401px) and (max-width: 600px)"
无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表,规范要求,它们应该在第一个不是连字符的非数字字母字符之前截断每个值。所以,早期浏览器应该将上面的示例解释为:
media="only"
因为没有only这样的媒体类型,所以样式表被忽略。类似地,早期浏览器应该将以下语句解释为media="screen":
media="screen and (min-width: 401px) and (max-width: 600px)"
换句话说,它应该将样式规则应用于所有屏幕设备,即使它不知道媒体查询的含义。不幸的是,IE 6–8未能正确实现该规范。没有将样式应用到所有屏幕的设备,它将整个样式表一起忽略。
尽管存在此行为,如果希望向其他不太常用的浏览器隐藏样式,仍然建议在媒体查询前面添加上only。
处理早期的Internet Explorer版本
IE 6到IE 8中缺少对媒体查询的支持,这不是问题。只需创建一组用于所有未使用媒体查询的浏览器的基本样式,而使用媒体查询为使用更高级浏览器的访问者提供一种增强的体验。
也可以使用Internet Explorer条件注释来向早期版本的IE提供一组特殊的规则,比如:
<!--[if lt IE 9 & !IEMobile]> <link href="iestyles.css" rel="stylesheet" type="text/css"> <![endif]-->
结合使用媒体查询与@import和@media
除了在附加外部样式表时在<link>标记中使用媒体查询,您也可以将它们与@import和@media结合使用。基本语法是相同的。例如,以下代码导入一个样式表,并将该样式应用到拥有不宽于400像素的屏幕的设备:
@import url("phone.css") only screen and (max-width:400px);
媒体查询也可像如下这样用于样式表中:
@media only screen and (max-width:400px) { #navbar { float: none; width: 400px; } }
测试媒体查询
测试代码很重要。
本文所附带的ZIP文件包含一个范例文件(mediaqueries.html),该文件附加了3种不同的设计。使用范例文件执行以下调节测试。将浏览器窗口完全打开,您可以看到基本的站点设计(参见图1)。将浏览器窗口缩小,在进入各种设备的尺寸范围时可以注意到变化。进入代码中指定的尺寸范围时,样式会更改为平板电脑(图2)或电话大小(图3)。例如,对于平板电脑,页眉图像会变得更小,下面的独立区域会呈现不同的形式。对于电话样式,主要的中央图像会消失,替换为由更大的垂直按钮组成的菜单。
浏览器在每次窗口更改时都会检查媒体查询,比如当您调整它时,或者当您将电话从竖向旋转到横向时。
Dreamweaver CS5.5中的媒体查询
Dreamweaver CS5.5在Adobe在针对Dreamweaver CS5的11.0.3更新中引入的媒体查询支持之上进行了改进。新的Media Queries对话框可帮助您为一个页面或整个网站创建和维护媒体查询(参见图5)。
您可以从以下任何位置访问Media Queries对话框:
- Modify > Media Queries
- Multiscreen Preview面板 > Media Queries按钮
- Multiscreen下拉菜单 > Media Queries
- CSS Styles面板右上角的Options菜单
- CSS Styles面板中的上下文菜单
图5. Dreamweaver CS5.5中的Media Queries对话框
使用这个新对话框,您可以:
- 创建多个媒体查询。
- 将媒体查询附加到当前页,这会添加一个或多个CSS文件的链接。
- 创建一个site-wide媒体查询文件,这会添加一个集中化的CSS文件的链接,该文件导入其他特定于设备的CSS文件。
当使用site-wide选项时,您可以链接到现有的CSS文件,或者从对话框自身中创建新文件。
Media Queries对话框还将在查询上方使用您作为描述而添加的文本创建一个注释。
此外,您可以选择将视区<meta>标记添加到文档中,这将强制设备报告它的实际尺寸,而不是标称的视区。选择此选项有助于预防由于错误报告的尺寸而引起的意外缩放。
注意:对于现在,Media Queries对话框仅读取和写入拥有至少一个min-width和max-width值的查询。此外,该对话框还会编辑这些唯一的min-和max-值。您可以手动编辑其他查询参数,但min-width和max-width是最常用于确定目标设备的值。
预设值和站点定义
Media Queries对话框还在媒体查询列表区域底部提供了一个预设选项。单击这个Default Presets按钮,Dreamweaver会自动创建:
- 3个分别针对平板电脑、电话和桌面的媒体查询
- 预先填充了常用起始值的min-width和max-width。
Default Presets按钮提供了一种开始使用媒体查询的快速途径。
另一种管理site-wide媒体查询文件的方便方式是使用Site Setup对话框。现在有一个名为Site-wide Media Query File的字段(位于Advanced Settings > Local Info中),它指定了您的site-wide媒体查询文件。只要您打开Media Queries对话框,这里列出的文件就会显示为site-wide选项。对于新的(或者甚至现有的)文件,您所需的只是选择该选项来将site-wide媒体查询文件应用到当前页面。
本页相关信息来自infoQ网站/