什么是媒体询问？很多企业在官网都有这样的专栏。这是什么意思？

移动设备的迅速普及彻底颠覆了网页设计领域。用户不再仅仅在传统的桌面系统上浏览网页内容，而是越来越多地使用智能手机、平板电脑和其他各种尺寸的设备。网页设计师面临的挑战是确保他们的网站不仅在大屏幕上好看，而且在小手机和各种设备上也好看。媒体查询是为不同设备提供不同风格的好方法，它为每种类型的用户提供了最佳体验。作为CSS3规范的一部分，media query扩展了media属性的作用(它控制如何应用您的样式)。例如，多年来，人们经常通过指定media = & quot打印& quot打印网页。Media query将这一概念提升到了一个更高的层次，允许设计人员根据各种设备属性(如屏幕宽度、方向等)来确定目标样式。).图1-3展示了媒体查询的实际应用。它们显示了在桌面浏览器、平板电脑和iPod touch中查看同一网页的效果。

图一。在桌面上查看时，此网页为两栏布局。

在桌面版本中，此网页具有固定的宽度和两列布局。但在平板电脑上查看同一页面时，侧边栏会移到主内容下方。

& ltlink href = & quotCSS/phone . CSS & quot；rel = & quot样式表& quottype = & quottext/CSS & quot；media = & quot仅屏幕和(最小宽度:0px)和(最大宽度:649 px)& quot；& gt

图二。媒体查询对话框

在iPod touch中查看时，菜单会重新排列，图像会缩小。使用媒体查询为每个设备提供不同的样式。

图3。媒体查询重新设计了页面样式，以适应小得多的屏幕的限制。

本文概述了媒体查询，包括将帮助您快速开始自己的多屏网站开发的示例。注意:请务必在Adobe TV上查看以下视频:“Dreamweaver中的CSS3媒体查询”和“媒体查询如何使移动设备和不同屏幕的设计更容易”。

媒体查询示例

媒体查询的一个简单示例可能如下所示:

& ltlink href = & quotCSS/phone . CSS & quot；rel = & quot样式表& quottype = & quottext/CSS & quot；

media = & quot仅屏幕和(最大宽度:400像素)& quot& gt

在本例中，媒体查询被添加到

仅屏幕和(最大宽度:400像素)

这个例子的意思应该很明显:只把这个样式表应用到有屏幕的设备上，并且只在浏览器窗口的宽度不超过400像素的时候。从文件名phone.css可以看出，这个特定的查询是为phone style设计的。现在您已经看到了一个示例，让我们更详细地分析媒体查询，以及可以用来控制在哪里应用样式的设备函数。

媒体查询支持和功能

媒体查询支持Internet Explorer (IE) 9及以上版本、Firefox 3.5及以上版本、Safari 3及以上版本、Opera 7及以上版本以及大多数现代智能手机和其他基于屏幕的设备。虽然IE的早期版本不支持媒体查询，但是从现在开始你可以(也应该)使用它们了。处理早期浏览器的策略将在本文后面讨论。表1列出了可以在媒体查询中使用的设备功能。表1。用于在媒体查询中设置条件的媒体函数的最大函数值/最小描述宽度长度是显示区域的宽度高度长度是显示区域的高度设备-宽度长度是设备的宽度设备-高度长度是设备方向的高度垂直或水平否设备纵横比纵横比的方向纵横比是设备的纵横比，用两个整数用斜线分开(如16/9)。器件纵横比纵横比(宽度/高度)是器件宽度与器件高度的比率。color integer是每个颜色分量的位数(如果不是color，则值为0)0)color-index integer是输出设备的颜色查找表中的项目数；单色整数是单色缓冲区中每个像素的位数(如果不是单色，则值为0)；0)分辨率是输出设备每英寸的像素，代表一个整数，后跟dpi(每英寸点数)或dpcm(每厘米点数)逐行扫描或隔行扫描。不，电视设备使用的扫描过程是grid0或1。如果设置为1，则设备是基于网格的，例如只有一种固定字体的电传类型终端或电话显示设备(所有其他设备都是0)。表1中的前五个函数(宽度、高度、器件宽度、器件高度和方向)最有用。您可以添加min-和max-作为大多数函数的前缀，以表示最小值和最大值，如min-width和max-width。表1中的“最大/最小”列表列出了可以用这种方式修改的函数。

宽度、设备宽度和视口

媒体查询最令人困惑的方面之一可能是宽度和高度以及前缀为device-的类似值之间的差异。对于台式机和平板电脑来说，两者的区别很好理解:宽度和高度是指浏览器观看区域的大小，而device-width和device-height是指显示屏的大小。不是每个人都会全屏运行他或她的浏览器，所以宽度和高度是你需要使用的测量方法。移动浏览器将填满可用屏幕，因此您可能希望宽度和设备宽度相同。不幸的是，情况并非总是如此。大多数智能手机(包括Android、iPhone和Windows Phone 7)将宽度设置为约1000像素宽的标称可视区域(在iPhone和iPod touch中，为980像素；Windows Phone 7使用1024像素)。图4显示了iPod touch通常如何显示上图中的示例页面。

图4。默认情况下，现代移动设备会缩放网页以适应估计的查看区域。

即使附加到页面的样式表使用media query根据min-width和max-width的值提供不同的样式，iPod touch也会忽略这些样式并显示桌面版本，因为它的查看区域被认为是980像素宽。更令人困惑的是，iPhone、iPod touch和iPad在计算宽度时不考虑方向，而其他设备则考虑。幸运的是，有一个简单的方法可以解决这个困惑。苹果公司设计了一种新的

& ltmeta name = & quot视窗& quotcontent = & quot宽度=设备宽度，初始比例= 1 & quot& gt

这告诉移动设备将视口视为具有与设备的物理宽度相同的宽度。而且还告诉iPhone，iPod touch，iPad在计算宽度的时候要考虑方向。这样，你就可以放心地在媒体查询中使用width，因为你知道它的用途和你想的一样。注:许多移动设备(最明显的是iPhone 4和iPad 2)都有高分辨率显示器，每英寸像素比桌面或平板显示器高得多。这不会影响你在CSS中计算像素大小的方式。如果输出设备的每英寸像素与典型计算机显示器的每英寸像素相差很大，CSS要求浏览器重新调整像素值。一些开发人员现在将像素测量方法称为CSS像素。

如何编写媒体查询

要将媒体查询添加到媒体属性，可以使用表1中的媒体函数设置一个或多个条件。与CSS属性一样，在冒号后指定媒体函数值。每个条件都用括号括起来，并使用关键字and添加到媒体语句中。例如:

media = & quot屏幕和(最小宽度:401像素)和(最大宽度:600像素)& quot

查询是布尔值:它们要么为真，要么为假。如果整个陈述为真，将应用样式表。如果为false，样式表将被忽略。因此，在使用上述查询时，在应用样式表之前，所有部分都必须为真。换句话说，它只能在401到600像素宽的屏幕上工作。某些介质功能(如彩色、单色和网格)可用作条件，无需指定值。例如，以下语句适用于所有彩色显示器:

media = & quot屏幕和(颜色)& quot

指定备用功能No或关键字可用于指定备用媒体功能。相反，备用功能可以用逗号分隔的列表列出，例如:

media = & quot屏幕和(最小宽度:769像素)，打印和(最小宽度:6英寸)& quot

将此样式应用于宽度超过769像素的屏幕或使用至少6英寸宽纸张的打印设备。指定否定条件要指定否定条件，可以在媒体语句中添加关键字not，例如:

media = & quot不是屏幕和(单色)& quot

不能在单个条件前使用not。这个关键字必须在声明的开始，它否定了整个声明。因此，上述示例将适用于除单色屏幕之外的所有设备。用于对早期浏览器隐藏媒体查询的媒体查询规范也仅提供关键字，该关键字用于对早期浏览器隐藏媒体查询。类似于not，这个关键字必须在声明的开头。例如:

media = & quot仅屏幕和(最小宽度:401像素)和(最大宽度:600像素)& quot

无法识别媒体查询的浏览器需要逗号分隔的媒体类型列表。根据规范，它们应该截断不是连字符的第一个非字母数字字符之前的每个值。所以，早期的浏览器应该把上面的例子解释为:

media = & quot只有& quot

因为没有像only这样的媒体类型，所以样式表被忽略。类似地，早期的浏览器应该将下面的语句解释为media = & quot。屏幕& quot：

media = & quot屏幕和(最小宽度:401像素)和(最大宽度:600像素)& quot

换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义。不幸的是，IE 6–8未能正确实现该规范。没有一种设备可以将样式应用于所有的屏幕，它会忽略整个样式表。尽管有这种行为，如果您想隐藏其他浏览器不常用的样式，仍然建议只在媒体查询之前添加。处理IE 6到IE 8早期版本对媒体查询的支持不足不是问题。只需为所有不使用媒体查询的浏览器创建一组基本样式，使用媒体查询为使用更高级浏览器的访问者提供增强的体验。您还可以使用Internet Explorer条件注释为早期版本的IE提供一组特殊的规则，例如:

& lt！-[如果它是9 &！ie mobile]>；

& ltlink href = & quotiestyles.css & quotrel = & quot样式表& quottype = & quottext/CSS & quot；& gt

& lt！[endif]-& gt；

通过@import和@media使用媒体查询

除了附加外部样式表时，在

@导入URL(& quot；phone.css&quot)仅屏幕和(最大宽度:400 px)；

媒体查询也可以在样式表中使用，如下所示:

@媒体专用屏幕和(最大宽度:400像素){

#导航栏{

浮动:无；

宽度:400px

}

}

测试媒体查询

测试代码非常重要。针对平板电脑和智能手机的测试使测试变得更加复杂，因为理想情况下，您将有很多设备要处理。幸运的是，大多数查询可以在没有实际设备的情况下进行测量。拥有一个真实的设备总是更好，但是对于本文的目的，使用一个简单的浏览器将帮助您理解查询是如何工作的。本文所附的ZIP文件包含一个示例文件(mediaqueries.html ),其中附有三种不同的设计。使用示例文件执行以下优化测试。完全打开浏览器窗口，您可以看到基本的站点设计(参见图1)。缩小浏览器窗口，输入各种设备的尺寸范围就能注意到变化。当输入代码中指定的尺寸范围时，样式将更改为平板电脑(图2)或手机(图3)的尺寸。例如，对于平板电脑，标题图像将变得更小，下面的独立区域将呈现不同的形式。对于手机风格，主中心图像消失，取而代之的是由更大的垂直按钮组成的菜单。每次窗口改变时，浏览器将检查媒体查询，例如当你调整它时，或者当你将手机从垂直旋转到水平时。

Dreamweaver CS5.5中的媒体查询

Dreamweaver CS5.5改进了Adobe在Dreamweaver CS5 11 . 0 . 3更新中引入的媒体查询支持。新的媒体查询对话框可以帮助您创建和维护页面或整个网站的媒体查询(参见图5)。您可以从以下任何位置访问“媒体查询”对话框:修改>:媒体查询多屏幕预览面板>:媒体查询按钮多屏幕下拉菜单>:媒体查询右上角的选项菜单CSS样式面板CSS样式面板中的上下文菜单

图5。Dreamweaver CS5.5中的“媒体查询”对话框

使用这个新对话框，您可以:创建多个介质查询。将媒体查询附加到当前页面，这将添加到一个或多个CSS文件的链接。创建一个站点范围内的媒体查询文件，该文件将添加一个指向集中式CSS文件的链接，该文件导入其他特定于设备的CSS文件。使用站点范围选项时，您可以链接到现有的CSS文件或从对话框本身创建新文件。“介质查询”对话框还会使用您添加的文本作为描述，在查询上方创建注释。此外，您可以选择使视口:最小宽度和最大宽度。“默认预置”按钮提供了一种快速开始使用媒体查询的方法。管理站点范围内的介质查询文件的另一种简便方法是使用“站点设置”对话框。现在有一个名为“站点范围的媒体查询文件”的字段(位于“高级设置”>“本地信息”中)，它指定了您的站点范围的媒体查询文件。一旦打开“介质查询”对话框，此处列出的文件将显示为站点范围选项。对于新的(甚至现有的)文件，您只需选择此选项，将站点范围的媒体查询文件应用到当前页面。注意:更改此文件不会自动更新所有网站文件。“介质查询”对话框提供了一种简化创建和管理介质查询的好方法。媒体查询是确定不同风格的目标设备的首选方式。从上面可以看出，它们不仅适用于智能手机，还可以用来控制任何屏幕的观感。

http://www . adobe . com/cn/devnet/Dreamweaver/articles/introducing-media-queries . html

手机app读取媒体和文件是指读取了手机中哪个文件夹里的内容？

当前自己个人进行开放时读取媒体和文件是根据当前自己个人在进行使用时的规定来进行判断，如果说你想要读取内部所产生的一些文件内容或者是链接，就会有指定性的寻找文件夹进行查看。

如何查看自媒体的收益？

点开或者西瓜视屏，我的，点开创作中心，就能看到详细创作收益了。