Media queries，媒体查询，可以让我们根据设备的类型或者某些媒体特性与规则应用指定的样式。这里说的设备可以是打印设备或者屏幕设备，媒体的特性有很多，设备的方向，显示的比例，可视口的宽度与高度等等。比如我们可以根据设备或者浏览器的可视口的宽度或者高度范围，为页面添加特定的样式。
媒体查询是 Responsive web design 的关键，也就是在响应式的页面设计里，我们一般都需要使用媒体查询，为不同宽度与高度范围的可视口添加特定的样式。
viewport，可视口，或者叫视区，可以理解成浏览器窗口的可见区域。在桌面设备上，我们可以调节浏览器窗口的宽度还有高度，这就相当于是改变了可视口的大小。移动设备的浏览器一般都不支持手动调整窗口的大小，也就是可视口的宽度应该就是设备屏幕的宽度。
在浏览器，按一下 command + p 打印，先观察一下左边的打印预览里的文字的大小。如果你想在打印页面的时候修改文档的样式，可以使用媒体查询。
在样式表里，先用一个 @media，在 CSS 里可以添加一些 At-rules 控制 CSS 的行为。@media 的作用就是根据媒体查询的结果应用指定的一组样式。它的后面是媒体类型，可以是 print 表示打印设备 ，或者 screen ，屏幕设备，或者 all 表示全部类型媒体设备。
这里先用一下 print，后面可以继续连接一些媒体特性规则，暂时还没有。然后在大括号里可以添加一组样式，这些样式只会在符合查询结果的情况下使用。
用 body 作为选择器，把 font-size 设置成 22 像素，再用 margin 添加点外边距，大小是 64 像素。这样这段样式只会用在打印设备上。因为这段媒体查询限定了设备的类型是 print。
在浏览器，再按一下 command + p 打印，在打印预览这里你会发现文字的字号比之前大了一些，页面的边框也比之前大了一些。说明在打印的时候，页面用了我们给打印设备准备的一组样式。
准备
下面再修改一下网页文档，复制两份这个 .post ，再添加两块内容。 页面上会出现三首李商隐的诗。如果我们想在小尺寸设备上让它们堆叠在一起显示，在小尺寸大一些的设备上分成两栏显示内容，在更大一些的设备上分成三栏显示内容。这里说的设备的尺寸实际上就是 viewport 的大小，也就是可视区域的大小。
如果使用移动优先的设计方法来设计页面，在正常的样式表里先把页面在移动设备的样式做好，然后通过媒体查询分别设计不同尺寸范围的页面样式。
在样式表里，用 .post 作为选择器添加一段样式，把 margin-bottom 设置成 32 像素，padding-bottom 也设置成 32 像素，然后用 border-bottom 添加一个像素的实线边框。如果想去掉最后一个内容的下边框，可以用 .post:last-child 作为选择器，把 border-bottom 设置成 none。这样最后一个内容就不会使用下边框的样式了。
screen
再写两段媒体查询，用 @media ，设备类型是 screen ，后面可以用 and 连接其它的媒体特性规则，把它们要放在一组括号里，这里我们用 min-width 限定一下可视口的最小宽度，设置成 640 像素。这条媒体查询的意思就是媒体设备得是 screen，并且设备的最小宽度还得是 640 像素，也就是设备的宽度应该是大于 640 像素，这种情况下再添加一组样式，把它们放在一组大括号里面。
在大括号里面用 #app 作为选择器，把 display 设置成 grid ，然后用 grid-template-columns，把网格划分成两栏，每栏的宽度都设置成 1fr ，再用 gap 添加 32 像素的间隔。下面再用 .post 作为选择器，把 border-bottom 设置成 none，去掉下边框，再把 margin-bottom 设置成 0。
在浏览器调整一下可视口的宽度，宽度小于 640 像素的时候，内容会堆叠在一起，当宽度大于 640 像素以后，内容会分成两栏，并且内容的下边框样式也不见了。检查一下元素，选中 #app 这个元素，元素应用的样式里面，有一块来自媒体查询里的样式。说明当前这个元素用了我们在媒体查询里设计的样式，因为当前浏览器窗口的宽度大于 640 像素。
在样式表里再写一块媒体查询样式，@media screen and ，规则是 min-width 是 1024 像素，也就是当设备是 screen 并且最小宽度大于 1024 像素的时候。添加一段样式，用 #app 作为选择器，里面用 grid-template-columns 划分一下网格的栏，分成三栏，每一栏的宽度都是 1fr。
在浏览器再观察一下，调整窗口宽度，当窗口宽度大于 1024 像素的时候，内容会被分成三栏显示。检查一下 #app 元素，现在元素上用了刚才我们写的媒体查询里的样式。
缩小可视口的宽度，小于 1024 像素的时候，内容会分成两栏，继续调整宽度，小于 640 像素的时候，内容会在一栏堆叠在一起显示。
