最小宽度和最大宽度媒体查询的语法
响应式网页设计是一种构建网页的方法，这些网页可以根据访问者的屏幕大小动态更改其布局和外观。 大屏幕可以接收适合这些较大显示屏的布局，而较小的设备（如手机）则可以接收以适合该较小屏幕的方式格式化的同一网站。 这种方法为所有用户提供更好的用户体验，甚至可以帮助提高搜索引擎排名 。 响应式网页设计的一个重要部分是CSS Media Queries。
媒体查询就像您的网站CSS文件中的小条件语句，允许您设置某些CSS规则，这些规则只有在满足特定条件时才会生效 - 例如屏幕大小高于或低于特定阈值时。
媒体查询在行动
那么您如何在网站上使用媒体查询？ 这是一个非常简单的例子：
- 你将从一个结构良好的HTML文档开始，它没有任何视觉样式（这就是CSS的用途）
- 在您的CSS文件中，您可以像平常一样开始设计页面样式并为网站外观设置基准。 假设你想要页面的字体大小为16像素，你可以写这个CSS：body {font-size：16px; }
- 现在，您可能希望为具有足够空间的大屏幕增加字体大小。 这是Media Queries启动的地方。你可以像这样开始一个媒体查询：@media screen和（min-width：1000px）{}
- 这是媒体查询的语法。 它以@media开头来建立媒体查询本身。 接下来你设置“媒体类型”，在这种情况下是“屏幕”。 这适用于台式计算机屏幕，平板电脑，手机等。最后，您可以使用“媒体功能”结束媒体查询。 在我们上面的例子中，这是“中等宽度：1000px”。 这意味着媒体查询将启用最小宽度为1000像素宽的显示。
- 在媒体查询的这些元素之后，添加一个打开和关闭大括号，类似于您在任何常规CSS规则中所做的操作。
- 媒体查询的最后一步是在符合条件时添加要应用的CSS规则。 您可以在组成媒体查询的大括号之间添加这些CSS规则，如下所示：@media screen和（min-width：1000px）{body {font-size：20px; }
- 当满足媒体查询条件（浏览器窗口至少有1000个像素宽）时，此CSS样式将生效，将我们网站的字体大小从原来建立的16个像素更改为我们的20像素新值。
添加更多样式
您可以根据需要在此媒体查询中放置尽可能多的CSS规则，以调整您网站的外观。 例如，如果您不仅要将字体大小增加到20像素，而且还要将所有段落的颜色更改为黑色（＃000000），则可以添加以下内容：
@media screen和（min-width：1000px）{body {font-size：20px; } p {color：＃000000; }}添加更多媒体查询
此外，您可以为每个较大的尺寸添加更多媒体查询，并将它们添加到样式表中，如下所示：
@media screen和（min-width：1000px）{body {font-size：20px; } p {color：＃000000; {} @media screen和（min-width：1400px）{body {font-size：24px; }}第一个媒体查询将以1000像素宽的宽度踢入，将字体大小更改为20像素。 然后，一旦浏览器高于1400像素，字体大小将再次变为24像素。 您可以为特定网站添加尽可能多的媒体查询。
最小宽度和最大宽度
通常有两种方法来编写媒体查询 - 通过使用“最小宽度”或“最大宽度”。 到目前为止，我们已经看到“最小宽度”在行动中。 这会导致媒体查询在浏览器达到最小宽度后生效。 因此，当浏览器宽度至少为1000像素时，将使用“min-width：1000px”的查询。 当您以“移动优先”方式构建网站时，会使用此类媒体查询。
如果你使用“最大宽度”，它将以相反的方式工作。 一旦浏览器低于此大小，媒体查询“max-width：1000px”将适用。
关于较旧的浏览器
媒体查询的一个挑战是他们在Internet Explorer的旧版本中缺乏支持。 值得庆幸的是， 有些polyfills可以在这些较旧的浏览器中补充对媒体查询的支持，允许您在今天的网站上使用它们，同时仍然确保在较旧的浏览器软件中显示该网站不会被破坏。
17/17/17由Jeremy Girard编辑