媒体查询是一种通过浏览器特定的特点、特性和用户偏好等运行特定代码的方法。世界上最常用的媒体查询是以viewport变化来应用不同的样式代码。响应式设计的想法💡就是由此而来。

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

除了viewport的宽度，我们还有很多其他的特性可以使用。

通常情况下，使用CSS与媒体查询关联，除此之外，还可以使用HTML和JavaScript与媒体查询关联起来。

尽情通读原文，系统性过一遍媒体查询相关的知识吧。