1、首先准备html的文档，并且在文档中准备一个div空标签，如下图所示
2、然后给div中的样式类添加样式，如下图所示，样式主要设置了宽，高以及背景
3、然后运用@media规则进行媒体查询的设计，如下图所示，设置当页面宽度最小达到768的时候执行其下面的样式
4、接下来我们在定义一个尺寸，用来在PC端显示样式，如下图所示
5、由于媒体查询是高版本浏览器才具备的，所以对于低版本浏览器的话，需要引入低版本兼容脚本，如下图所示
6、最后媒体查询的尺寸也可以写多个，如下图所示，运用and将多个尺寸连接起来即可
7、综上所述，媒体查询的使用主要运用尺寸来界定各种平台，同时要注意低版本浏览器的兼容
