对媒体查询的理解
媒体查询由⼀个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和
颜色。媒体查询，添加自CSS3，允许内容的呈现针对⼀个特定范围的输出设备而进行裁剪，而不必改变内容本
身，适合web网页应对不同型号的设备而做出对应的响应适配。
媒体查询包含⼀个可选的媒体类型和满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特
征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的
表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会生效。
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设
置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面
也会根据浏览器的宽度和高度重新渲染页面。