css响应式媒体查询_使用CSS媒体查询创建响应式网站

css响应式媒体查询

每天，都有更多的手机和平板电脑投放市场。 消费者拥有各种可以想象到的大小和形状的设备，但是网站开发人员面临着一个独特的挑战：如何使他们的网站在传统浏览器以及移动和平板电脑浏览器中保持良好的外观。 我们如何在所有不同的屏幕尺寸上提供一流的用户体验？ 答案： 响应式设计 。 响应式设计会更改以适合其所显示屏幕的尺寸。 实现响应式设计的主要方法是使用CSS媒体查询。

在本文中，探索如何对台式机网站，手机和平板电脑使用媒体查询。 还学习如何检测媒体查询支持，并为尚不支持该技术的旧版浏览器提供后备体验。

先决条件

本文中的代码示例旨在在支持CSS媒体查询的Web浏览器中运行，包括Mozilla Firefox，Apple Safari，Google Chrome和Opera。 请参阅相关信息用于显示浏览器的兼容性支持在桌面和移动浏览器CSS3媒体查询的完整列表。

响应式设计

响应式设计会更改以适合其所显示屏幕的尺寸； 在渲染的每个屏幕上看起来都不一样。 响应式设计根据可使用的屏幕属性来呈现UI的优化版本。

例如，如果网站布局的边栏占据了屏幕宽度的25％，则该边栏在不同的屏幕尺寸上可能会出现截然不同的显示。 在大型台式机显示器上可能会很宽，而在小型智能手机屏幕上可能会非常狭窄。 在这些屏幕尺寸的高端或低端，侧边栏可能不再是可用的UI组件。

通过媒体查询，您可以编写CSS，该CSS会自动更改设计，以针对不同的屏幕尺寸提供最佳的UI体验。

媒体查询

自CSS版本2起，就通过媒体类型在CSS中提供了媒体支持。如果您制作过打印样式表，则说明您已经在使用媒体类型。 清单1显示了一个示例。

清单1.使用媒体类型

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在清单1中， media属性定义了样式表，该样式表应用于指定的每种类型的媒体：

• screen适用于彩色计算机屏幕。
• print适用于在打印预览模式下查看或在打印机上打印的内容。

媒体查询是CSS版本3规范的一部分，它扩展了媒体类型的功能，并允许样式表中更精确的显示规则。 媒体查询是一个表达式，其结果为True或False。 如果为True，则将使用其中包含的样式。 如果为False，则不会。 通过使用表达式而变得强大的这种简单逻辑使您在为特定设计方案应用自定义显示规则时具有更大的灵活性。

媒体查询由一种媒体类型组成，后跟一个或多个用于检查特定条件（例如最小屏幕宽度）的表达式。 在样式表中，媒体查询规则可能类似于清单2中的示例。

清单2.媒体查询规则

@media all and (min-width: 800px) { ... }

根据清单2中的标记，对于最小水平屏幕宽度为800像素的所有类型的媒体（屏幕，打印等），请使用以下CSS规则。 规则将出现在示例中的省略号位置。 对于该媒体查询：

• @media all是媒体类型，它表示将此CSS应用于所有媒体类型。
• (min-width:800px)是包含媒体查询的表达式，如果浏览器的最小宽度为800像素，该表达式将告诉浏览器仅应用以下CSS。

请注意，在清单2中，关键字all和and可以省略。 当媒体查询适用于所有介质类型， all可以省略。 尾随and也是可选的。 重写媒体查询以使用速记语法类似于清单3。

清单3.速记语法

@media (min-width:800px) { ... }

媒体查询也可以包含复杂的表达式。 例如，如果您想要创建一种仅在最小宽度为800像素而最大宽度为1200像素时才应用的样式，则可以使用清单4中的规则来实现。

清单4.复杂表达式

@media (min-width:800px) and (max-width:1200px) { ... }

你可以有很多and你表达的条件，只要你愿意。 如果要添加其他条件来检查特定的屏幕方向，只需添加另一个and关键字，然后添加其他orientation媒体查询，如清单5所示。

清单5. and条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

仅当最小宽度为800像素，最大宽度为1200像素且方向为纵向时，才激活清单5中的媒体查询。 （方向通常仅在可以轻松在纵向和横向模式之间旋转的智能手机和平板电脑上有意义。）如果这些条件中的任何一个为False，则不会应用媒体查询规则。

and关键字相反的是or关键字。 像and一样，它将条件组合在一起以形成复杂的表达式。 如果两个条件中的任何一个为true，则具有或分隔两个条件的表达式将为True，如清单6所示。

清单6. or关键字

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少为800像素或方向为纵向，则将应用该规则。

要保留在您的武器库中的另一个媒体查询关键字not 。 放置在媒体查询的开头， not否定结果。 换句话说，如果在没有not关键字的情况下查询将为true，则查询将为false。 清单7显示了一个示例。

清单7.使用not

@media (not min-width:800px) { ... }

用简单的英语来说，清单7中的代码意味着，无论最小宽度不是 800像素，都应应用以下CSS规则。 这些示例仅将像素用作媒体查询中的度量单位，但您不仅限于像素。 您可以使用任何有效CSS度量单位，例如厘米（cm），英寸（in），毫米（mm）等。

有用的媒体功能

您可以在媒体查询中使用多种媒体功能，例如宽度，颜色和网格。 对每种可能的媒体功能的描述不在本文讨论范围之内。 万维网联盟（W3C）关于媒体查询的文档有完整列表（请参阅参考资料 ）。

要设计自适应网站，您只需要了解一些媒体功能：方向，宽度和高度。 方向是一种简单的媒体功能，其值可以为portrait或landscape 。 这些值与用户握住手机或平板电脑的方式相匹配，这使您可以针对两种外形优化内容。 当高度超过长度时，屏幕将被视为纵向模式，而当宽度大于高度时，则将屏幕视为横向模式。 清单8显示了使用orientation媒体查询的示例。

清单8. orientation媒体查询

@media (orientation:portrait) { ... }

高度和宽度的行为类似。 都允许使用min-和max-前缀。 清单9显示了一个有效的媒体查询。

清单9.高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

您还可以使用不带min-或max-前缀的width和height媒体功能，如清单10所示。

清单10.没有min-和max-前缀

@media (width:800px) and (height:400px) { ... }

当屏幕正好为800像素宽且高度为400像素时，清单10中的媒体查询将匹配。 在现实世界中，像这样的媒体查询可能过于具体而无用。 检测确切的尺寸是大多数（如果不是全部）网站访问者可能永远不会遇到的方案。 通常，响应式设计使用范围来执行屏幕检测。

作为媒体查询大小范围的自然补充，下一部分将探讨一些常见的媒体查询，这些内容在设计响应站点时可能会有用。

常见媒体查询

由于Apple是第一个将消费者智能手机和平板电脑产品推向市场的产品，因此以下大多数媒体查询均基于这些设备的尺寸。

要以横向模式定位智能手机，请使用： @media (min-width: 321px) { ... }

要以纵向模式定位智能手机，请使用： @media (max-width: 320px) { ... }

要以横向模式定位Apple iPad，请使用： @media (orientation: landscape) { ... }

要以纵向模式定位iPad，请使用： @media (orientation: portrait) { ... }

您可能已经注意到iPad上使用了orientation媒体功能，而Apple iPhone上使用了width 。 为什么？ 不幸的是，iPhone不支持orientation媒体功能。 您必须使用width模拟这些方向断点。 请参阅相关主题有关常见媒体查询的详细信息。

SASS中的媒体查询

凭借Ruby on Rails的内置支持有助于推动其流行，语法很棒的样式表（SASS）在Web开发社区中越来越受欢迎。 关于SASS的详细讨论不在本文的讨论范围之内，但是我将在基于SASS的样式表中介绍使用媒体查询的基础知识。 请参阅相关主题 ，以了解更多关于上海社会科学院。

SASS中的媒体查询的行为与普通CSS完全相同，唯一的例外是：它们可以嵌套在其他CSS规则中。 当媒体查询嵌套在另一个CSS规则中时，它将规则放在样式表的顶层，如清单11所示。

清单11.嵌套媒体查询

#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

清单11中的示例将编译为清单12中的代码。

清单12.编译结果

#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

整理媒体查询

现在您已经知道如何编写媒体查询，是时候考虑以一种逻辑，有组织的方式将它们部署到CSS代码库中了。 决定如何组织媒体查询很大程度上取决于个人喜好。 本节探讨两种主要方法的优缺点。

第一种方法是为不同的屏幕尺寸指定完全不同的样式表。 好处是规则保存在单独的样式表中，从而使显示逻辑清晰地分开，并且可能更易于团队维护。 这也可能使源代码分支之间的合并更加容易。 这种好处也是它的缺点。 通过为每个媒体查询创建单独的样式表，您不再将所有元素的样式分组在同一文件中的同一位置。 在更改元素CSS时，通过创建更多的外观来查找，可能会更难以维护网站CSS。

第二种方法是在定义其余元素样式的位置旁边的现有样式表中使用媒体查询。 好处是它将所有元素样式保持在同一位置。 在团队中工作时，这种做法可以创建更多的源代码合并工作，但这是所有基于团队的软件开发中可管理​​的通用部分。

没有正确或错误的方法。 选择最适合您的项目和团队的方法。

浏览器支持

到目前为止，您可能已经确信CSS媒体查询是一个很好的工具，并且想知道哪种浏览器支持CSS媒体查询。 这方面有好消息，也有坏消息。

• 好消息：大多数现代浏览器（包括智能手机上的浏览器）都支持CSS媒体查询。
• 坏消息：Redmond的浏览器不支持Windows®InternetExplorer®8。

  对于大多数专业的Web开发人员来说，这意味着您需要一种解决方案来支持Internet Explorer中的媒体查询。

下面的解决方案是一个JavaScript polyfill，称为react.js。

使用fill.js进行Polyfill

Respond.js是一个很小JavaScript库，用于增强Web浏览器并在本身不支持它们的浏览器中启用CSS媒体查询。 该脚本循环浏览页面上引用的所有CSS，并解析出使用媒体查询CSS规则。 然后，脚本会监视浏览器的宽度变化，以添加和删除与CSS中的媒体查询相匹配的样式。 最终结果是在本机不支持它们的浏览器上运行CSS媒体查询。

因为这是基于JavaScript的解决方案，所以浏览器将需要启用JavaScript才能使脚本正常工作。 该脚本仅专注于支持创建响应式设计所需的最小和最大width媒体查询。 这并不意味着可以替代那里所有可能CSS媒体查询。 请参阅相关主题 ，以了解更多关于脚本的功能和限制。

Respond.js是众多可用的开源媒体查询polyfill中的一种，您可以从中选择。 如果您发现response.js不能满足您的需求，那么将进行一些研究，以揭示几种替代方案。

结论

借助CSS媒体查询，无论使用哪种类型的浏览器或设备访问网站，您都可以轻松地针对特定的屏幕尺寸并创建可靠的用户体验。 这些技术是响应式设计的中心，响应式设计是一种新兴的移动Web设计和开发实践。 在您的网站上尝试媒体查询并没有实际成本（除了简单地增强现有CSS文件之外），那么为什么不尝试一下呢？ 访问者可以在平板电脑，手机和电子阅读器上浏览您的网站，谢谢您。

---

翻译自: https://www.ibm.com/developerworks/web/library/wa-cssqueries/index.html

css响应式媒体查询