在过去，如果你作为一个开发人员创建一个网站，你会做的是为典型的桌面电脑制作一个网站。当时没有大量不同的屏幕尺寸，在大多数情况下，它们是非常相同的。我们没有平板电脑和移动设备来浏览网页。然后随着技术的发展，浏览网页成为移动设备的事情。移动设备，如iPhone、安卓设备和平板电脑都内置了浏览器。这带来了一个问题，即为计算机典型的笔记本电脑和桌面显示器建立的网站，在移动设备上看起来很糟糕。处理移动响应性问题可能是一个难以破解的难题。在这篇文章中，我们将仔细研究什么是媒体查询以及如何在CSS中使用它们。
在这篇文章中，你将了解到。
什么是响应式网页设计（RWD）？
响应式网页设计（RWD）是一种网页设计方法，其目标是创建在所有设备上看起来都不错的网页。响应式网页设计是指一个单一的网站能够对多种屏幕尺寸或设备类型作出反应，同时保持其美观和美感。
网站响应的东西有很多，不仅仅是屏幕上的像素数，也不仅仅是宽度，可能是高度，也可能是设备是横向还是纵向，你是如何拿着你的手机或平板电脑的。
一个响应式的网页会根据不同的屏幕尺寸和视口自动调整。
简单地说，网站响应用户的各种形式的设备的过程被称为响应式网页设计（RWD）。
如何创建一个网络响应式网页。
设置视口
为了创建一个响应式网站，在你的所有网页上添加以下。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这将设置你的页面的视口，并给浏览器提供如何控制页面尺寸和缩放的指示。这是你添加到HTML中的一个小行，告诉你的手机浏览器，希望你的网站是响应式的。通过在你的HTML中添加这个小修正，你的媒体查询和你在CSS中包含的其他响应式布局将发挥它们应有的作用。
设备和内容的常见断点。
断点对于确定何时改变布局和适应媒体查询中的新规则很重要。
如上图所示，这些是常用的设备宽度的断点。目前市场上有大量的设备，我们无法为每台设备定义一个固定的断点。以下提到的断点并不是标准的断点，而是编写CSS时常用的断点。
- 对于移动设备。0px-480px
- 对于平板电脑、iPad和较大的智能手机：481px-768px
- 对于笔记本电脑和小屏幕 : 769px-1024px
- 对于台式机。1025px-1200px
- 对于较大的屏幕，较大的台式机，电视和显示器。1201px及以上。
什么是媒体查询？
媒体查询是构建响应式网页设计的基础。如果你想做任何形式的移动响应式设计，媒体查询是必不可少的，在今天的时代，你需要考虑到移动设备。媒体查询被用来根据设备类型或屏幕尺寸等特征有条件地应用样式。在CSS中，媒体查询为我们提供了编写只适用于某些屏幕尺寸的CSS样式的能力。
媒体查询的语法。
@media media type and (condition: breakpoint){
/* CSS Media Query Syntax */
}
看了上面写的语法，似乎很混乱。让我们来看看组成这个语法的组件，以帮助我们理解如何有效地使用媒体查询。
@媒体规则
在CSS中定义媒体查询的第一步是编写@media规则。@media规则也被用来指定目标媒体类型。
媒体类型
有四种类型的媒体类型。
- 所有-- 用于所有媒体类型
- 打印-- 仅适用于打印机。
- 语音- 适用于屏幕阅读器，可以大声读出页面，就像我们这里的媒介的屏幕阅读器功能一样。
- 屏幕- 适用于电脑、平板电脑、移动电话和电视屏幕。
还需要注意的是，如果我们不应用媒体类型，@媒体规则会默认选择所有类型的设备。
在定义了@media规则并选择了目标媒体类型后，在括号（）内，我们设置了一个条件，可以是最大宽度或最小宽度，也可以指定你希望定义的规则所适用的断点。
例如，我们想为移动设备的段落应用一个较小的字体大小。为了达到这个目的，我们将设置最大宽度，以检查设备的宽度。
p{
font-size:16px;
}
/* CSS Style for a mobile screen*/
@media screen and (max-width:480px){
p{
font-size:12px;
}
}
这里，断点是480px。现在媒体查询知道何时执行或覆盖p元素的新字体大小。你应该注意的是，如果设备的宽度小于或等于480px，p的字体大小将是12px，而如果设备的宽度大于480px，p的字体大小将是16px。
如何在CSS中使用媒体查询
我们已经考虑了如何在你的样式表中编写和定义媒体查询，让我们考虑几个例子来帮助我们巩固对这个神奇的CSS功能的理解。
body{
background-color:black;
}
/* This style will give the body of the webpage a background color of black. */
让我们使用上面的CSS样式添加一些媒体查询。
@media screen and (min-width:768px){
body{
background-color:white;
}
}
这里，最小断点是768px。现在，媒体查询将为大于或等于768px的屏幕在页面的主体上应用一个新的背景颜色白色。
@media screen and (max-width:1200px)
body{
background-color:blue;
}
}
这里，最大的突破点是1200px。现在媒体查询将为小于或等于1200px的屏幕在页面主体上应用一个新的背景颜色蓝色。
总结
正如我们所看到的，在目前这个时代，响应式网页设计是建立网站的关键。媒体查询为我们提供了建立一个响应式网站的能力。值得注意的是，CSS中还有其他一些功能可以帮助我们创建响应式布局，比如Flexbox和Grid。我希望你喜欢这篇文章？
如果你有任何问题，你可以在评论区分享。我将非常乐意回答每一个问题。
谢谢您的阅读。
