内容
- 所需知识： 中级CSS和HTML
- 要求： 文本编辑器，现代浏览器，图形软件
- 项目时间： 1小时（共5小时）
- 支持文件
媒体查询无疑是CSS规范中相对较新的部分，无疑是响应式Web设计中最令人兴奋的方面，并且是进行进一步试验的时机。
接受了自适应布局的需求后，一些人已经将媒体查询视为将自适应布局改版到现有固定宽度站点上的一种方法。在那些接受响应式布局的人中，许多人是从桌面角度这样做的，随着视口范围的缩小隐藏了内容和功能。
在本教程中，我们采用了一种移动优先的替代方法。现在，当我们希望包括媒体查询时，我们可以考虑 加 随屏幕空间的增加而增加功能，请放心，我们网站的标记和设计提供了可观的基准。
今天，我们将超越模式组合，构建网站所需的各个页面。这样，我们将了解如何构建媒体查询，并以一种真正的响应方式实现它们。
01.添加媒体查询
随着我们的模式组合中的组件完成并且在任何布局的范围之外工作，是时候将它们移动到组成我们站点的不同页面中了。
我们将从首页开始。从面向桌面的设计中，我们可以看到，在更宽的视口中，布局应如下所示：
从我们的设计中进行测量，我们可以在CSS中描述文档区域，如下所示：
。文档 {
填充：0 5％;
}
。主要的 {
宽度：74.242424242424％; / * 784/1056 * /
向左飘浮;
}
。补充 {
宽度：22.727272727273％; / * 240/1056 * /
浮动：正确；
}
正如我们在本教程的第二部分中学到的，我们正在使用以下公式来计算这些列的百分比宽度：
（目标/上下文） * 100 =结果
调整浏览器大小时，我们会看到桌面布局从最小尺寸的屏幕缩放到最大尺寸的屏幕。当然，在小尺寸的情况下，列太窄且行长太短以致内容难以阅读。我们仅在有足够的可用空间时才需要这种布局。
这是媒体查询的来源。假设此布局仅在浏览器宽于768px时才生效，所以我们可以添加以下CSS：
。文档 {
填充：0 5％;
}
@media屏幕和（最小宽度：768px）{
。主要的 {
宽度：74.242424242424％; / * 784/1056 * /
向左飘浮;
}
。补充 {
宽度：22.727272727273％; / * 240/1056 * /
float：right;
}
}
现在，当视口的宽度小于768像素时，媒体查询中的所有内容都将被忽略。任何也不支持媒体查询的浏览器都将忽略它。
02.媒体查询的剖析
要了解此处发生的情况，我们来看看如何构建媒体查询。我们可以将其分为两部分：
- @媒体屏幕： 媒体查询的第一部分是 媒体类型。如果您曾经在CSS中包含打印样式，则可能会认识到这种语法。您也可以从 媒体 的属性 链接> 元素。这是因为它们都接受CSS 2.1规范中认可的一组媒体类型。
- （最小宽度：768px）： 第二部分是 询问。这包括 特征 要查询（在这种情况下为视口的最小宽度）以及相应的 价值 测试（768px）。
当我们谈论响应式网页设计时，倾向于集中在宽度上，但是我们也可以测试其他功能：
- （最小-|最大-）宽度 和 （min- | max-）高度： 这些使我们能够查询视口（即浏览器窗口）的宽度和高度。
- （min- | max-）设备宽度 和 （min- | max-）设备高度： 这些使我们能够查询整个显示器的宽度。以我的经验，通常在视口而不是在显示器上放置布局是比较明智的。
- 方向： 您可以立即想到这里的可能性；想一想根据手机的方向显示不同内容的应用程序-在网络上也可以实现相同的目的。
- （min- | max-）长宽比： 这使我们可以根据浏览器窗口的比例调整布局。
- （min- | max-）device-aspect-ratio： …这使我们可以根据设备的宽高比执行相同的操作。欧文·格雷格里（Owen Gregory）去年写了一篇精彩的文章，探讨了如何使用此查询将我们的设计与出现在其上的设备联系起来。
- （min- | max-）单色： 我们还可以测试设备是否具有单色显示。想象一下，如果亚马逊的电子墨水Kindle设备没有说谎并且将其屏幕报告为彩色，那将有多大用处！
我们查询的最后一部分可能是最有用的。通过使用 和，我们可以在一个查询中测试多种功能。例如：
@media屏幕和（最小宽度：768px）和（方向：横向）{
...
}
如您所见，媒体查询可以帮助我们建立引人入胜的体验-我只是触及表面。如果您希望在就寝时间轻松阅读，可能比阅读W3C媒体查询规范要糟糕得多，该规范描述了我们可以测试的所有功能。
03.还有一件事…
即使我们在CSS中包含了媒体查询，但如果我们在移动设备上查看我们的网站，您也会注意到我们的网站仍在呈现，就像显示宽度超过768像素一样。
要了解为什么会发生这种情况，我们需要上一段简短的历史课。
当最初的iPhone于2007年发布时，其最大的卖点之一就是能够浏览“真实网络”，即使这意味着需要压缩固定宽度的台式机网站才能适合其小屏幕。 iPhone通过报告其显示为980像素宽来做到这一点，然后将网页缩小到适合其320像素宽的屏幕。
但是iPhone是在响应式设计问世之前推出的。既然作者正在设计针对移动设备设计的网站，那么此功能就不再有用。值得庆幸的是，苹果公司提供了一种绕过此行为的方法，并且由于它已被其他制造商采用，因此它几乎已经成为一种 事实上的 标准。它只涉及添加一个 元 我们标记的元素：
meta name =“ viewport” content =“ initial-scale = 1.0，width = device-width” />
这告诉感知视口的浏览器不应该缩小网站的比例，并且浏览器窗口的宽度应与设备的整体宽度相同。添加此行后，我们的网站将显示预期的布局：
04.选择断点
让我们回到媒体查询：
@media屏幕和（最小宽度：768像素）{
...
}
布局适应的值通常称为断点。回想一下，在第二部分中，我说过使用像素表示思维迟钝，但在这里我选择了768像素，可能是因为它是一个熟悉的设备的宽度。
与其根据流行设备的特征选择断点，不如查看从我们的内容中得出的值，例如，舒适的阅读线长度或图像的最大尺寸，会更有效。
通过使用ems来确定我们的类型大小，我们的媒体查询也应该使用ems似乎是明智的。实际上，这样做还有其他好处。当用户在浏览器中调整文本大小时，页面将适应使用较小的断点。我们的网站不仅会根据视口的大小进行调整，而且还会根据字体的大小进行调整。实际上，只有当我看到杰里米·基思（Jeremy Keith）演示基于em的媒体查询时，我才意识到它们的功能强大。
尽管我们的设计可能会提供一些可能的断点的指示，但选择断点的最佳方法通常是通过实验。通过调整浏览器窗口的宽度，我决定将800px转换为更复杂的布局是一个很好的宽度。
800px如何在ems中表达？同样，我们可以使用公式，但是上下文是什么？计算媒体查询的em时，上下文始终是浏览器的默认字体大小 不管此值是否已在CSS中被覆盖。该默认值通常为16px，这为我们提供了：
800 / 16 = 50
现在，我们可以像这样更新媒体查询：
@media屏幕和（最小宽度：50em）{/ * 800px * /
...
}
05.调整缩略图
您会记得，在第2部分中，我们将缩略图设置为响应式。但是，一旦这些缩略图中的图像达到其全部宽度，则在每个图像的右侧都会出现一个空白区域。再次，媒体查询使我们可以解决此问题。
这是我们的原始CSS：
ol.media li.media-item {
背景颜色：#fff;
保证金：0 0 4.16666666667％4.16666666667％0;
宽度：47.91666666667％;
向左飘浮;
}
ol.media li.media-item：nth-child（2n）{
右边距：0；
}
当浏览器变得比560px宽时，出现空白。我们将选择此值以交换为每行显示三个缩略图。我们可以通过添加以下CSS来做到这一点：
@media屏幕和（最小宽度：35em）{
.media-item {
宽度：30.612244897959％; / * 240/784 * /
保证金：0 4.081632653061％1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item：nth-child（3n）{
右边距：0；
}
}
请注意，我们不需要重写此媒体查询中缩略图所需的所有样式，只需重写我们希望改编的部分即可。
在浏览器中查看此更改，您会注意到第二个缩略图的右边没有空白。这是因为以下CSS规则仍然保持活动状态：
ol.media li.media-item：nth-child（2n）{
边距右：0;
}
我们需要在媒体查询中修改CSS以重置该值：
@media屏幕和（最小宽度：35em）{
.media-item {
宽度：30.612244897959％; / * 240/784 * /
保证金：0 4.081632653061％1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item：nth-child（2n）{
保证金权利：4.081632653061％;
}
.media-item：nth-child（3n）{
右边距：0；
}
}
创建媒体查询时，请始终注意此类继承问题。
06.不只是宽度
重要的是，不仅要考虑宽度，还要考虑其他变量，来考虑媒体查询。例如，当视口高度降低时，媒体项目页面上的视频将部分隐藏。我们拥有的技术：
.media-object-wrapper {
底部填充：56.25％;
宽度：100％;
高度：0；
职位：相对
}
@media屏幕和（最大高度：35em）和（方向：风景）{/ * 560px * /
.media-object-wrapper {
宽度：60％;
底边填充：33.75％;
}
}
我什至包括一个方向查询，以进一步完善此行为。
对于设计的其他部分，我们可以采用类似的方法，交换较大版本的标题，并在有可用空间时将导航链接移动到页面顶部。
- 查看我们的响应式主页
- 查看我们的自适应媒体项目页面
我们终于得到它了！我们已经建立了一个响应迅速的网站，而且还有一天的时间！好吧，不完全是。灵活的布局，图像和媒体查询只是响应式设计过程的开始。
明天： 在本教程的最后部分，我们将不只是响应式Web设计，还将探讨如何构建真正的响应式网站。
保罗是英国布莱顿的一名互动设计师。他在制作简单但引人入胜的网络本地界面时最快乐。
