除了使用媒体查询和现代CSS布局（如flexbox和grid）来创建响应式网站外，我们还可以做好某些被忽视的事情来制作响应式网站。

页面为了适应各种设备（PC端、移动端的不同设备）的不同显示情况，增加了媒体查询的功能，通过特定的要求达到不同的样式显示。媒体查询通常用来区别于屏幕宽度大小

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型（比如屏幕、打印机或者屏幕阅读器）定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）

@media 媒体查询选择性加载css，意思是自动探测屏幕宽度，然后加载相应的CSS文件。可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是个不错的选择

CSS3及JS媒体查询教程：关键词“not”取补集，“only”不再推荐使用（not，only都是可选的），“,”用法同CSS选择器中的逗号用法，表示一种合写。媒体查询大部分都接受前缀min或max，表示大于等于或小于等于。（切记min和max对应的顺序，不要被表象所误导）