什么叫媒体查询?很多企业官网上都有这么一栏的,是什么意思?
发布网友
发布时间：2022-04-06 10:41
共3个回答
懂视网
时间：2022-04-06 15:03
一、什么是媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
二、@media 媒体查询的使用
a.要在html文档中添加以下代码，用来兼容移动设备的显示效果
<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
width=device-width:宽度等于当前设备的宽度
initial-scale=1：初始的缩放比例（默认为1）
maximum-scale=1：允许用户缩放到得最大比例（默认为1）
user-scalable=no：用户不能手动缩放
b.在CSS文件中写响应式媒体查询
基本语法：@media 媒体类型 and （媒体特征）{样式}
举例1：
@media screen and (max-width:480px){
body {
background:red
}
}表示：当屏幕小于或等于480px时,页面中的背景颜色变成红色。
举例2：
@media screen and (min-width:900px){
body{
font-size：20px
}
}表示：当屏幕大于或等于900px时,页面中的字体大小变成20px。
举例3：
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}表示：当屏幕在600px~900px之间时，body的背景色为“#f5f5f5”。
总结：以上介绍了什么是媒体查询@media，并举例介绍媒体查询的使用方法。
热心网友
时间：2022-04-06 12:11
图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. 媒体查询重新设置页面的样式，以适应小得多的屏幕的*。
本文概述媒体查询，包含将帮助您快速开始自己的多屏幕网站开发的示例。注意： 确保也查阅了Adobe TV上的以下视频：“Dreamweaver中的CSS3媒体查询”和“媒体查询如何使针对移动设备和不同屏幕的设计变得更加轻松”。
媒体查询示例
媒体查询的一个简单示例可能如下所示：
<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像素时应用。您可以从文件名phone.css上看出，这个特定的查询是为电话样式设计的。现在您已看到了一个示例，让我们更详细分析一下媒体查询，以及您可用于控制在何处应用样式的设备功能。
媒体查询支持和功能
媒体查询支持Internet Explorer (IE) 9及更高版本、Firefox 3.5及更高版本、Safari 3及更高版本、Opera 7及更高版本，以及大部分现代智能电话和其他基于屏幕的设备。尽管IE的早期版本不支持媒体查询，但您可以（而且应该）从现在开始使用它们。处理早期浏览器的策略将在本文后面探讨。表1列出了可用于媒体查询中的设备功能。表1. 用于设置媒体查询中的条件的媒体功能功能值最大 / 最小值描述width长度是显示区域的宽度height长度是显示区域的高度device-width长度是设备的宽度device-height长度是设备的高度orientationportrait或landscape否设备的方向aspect-ratio高宽比（宽/高）是设备的宽高比，使用由1个斜杠分开的两个整数表示（比如16/9）device-aspect-ratio高宽比（宽/高）是设备宽度与设备高度的比率color整数是每种颜色成分的位数（如果不是颜色，该值为0）color-index整数是输出设备的颜色查找表中的项数monochrome整数是单色镇缓冲区中每像素的位数（如果不是单色，该值为0）resolution分辨率是输出设备的像素密度，表示为整数后跟dpi（每英寸点数）或dpcm（每厘米点数）scanprogressive或interlace否TV设备使用的扫描过程grid0 或 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是您需要使用的度量方法。移动浏览器将填满可用的屏幕，所以您可能期望width和device-width是相同的。不幸的是，并不总是这样。大多数智能电话（包括Android、iPhone和Windows Phone 7）将width设置为大约1,000像素宽的标称视区（在iPhone和iPod touch中，它为980像素；Windows Phone 7使用1024像素）。图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 QueriesMultiscreen Preview面板 > Media Queries按钮Multiscreen下拉菜单 > Media QueriesCSS 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个分别针对平板电脑、电话和桌面的媒体查询预先填充了常用起始值的code>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媒体查询文件应用到当前页面。注意：更改此文件不会自动更新所有站点文件。Media Queries对话框提供了一种简化媒体查询的创建和管理的不错方式。媒体查询已是使用不同样式确定目标设备的首选方式。从上面可以看到，它们不仅适用于智能电话，还可用于控制任何屏幕的观感。
http://www.adobe.com/cn/devnet/dreamweaver/articles/introcing-media-queries.html来自：求助得到的回答
热心网友
时间：2022-04-06 13:29
不是很懂，详情请见：http://www.adobe.com/cn/devnet/dreamweaver/articles/introcing-media-queries.html
