编写媒体查询

媒体查询 是评估 True 或 False 的一种表达。如果为True，则继续使用样式表。如果为False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，能够更灵活地对特定的设计场景使用自定义的显示规则。

简单来讲 就是在后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式，设置的不同大小时，有不同的样式。

编写方法

max 最大

@media screen and (max-width : 970px) {
        .arr {
            display: none;
        }
    }

所有最大水平屏幕宽度为 970 像素的屏幕都应使用如下 CSS 规则。
@media screen 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(max-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素则会告诉浏览器只运用下列 CSS。

min 最小

@media screen and (min-width : 970px) {
        .arr {
            display: none;
        }
    }

所有最小水平屏幕宽度为 970 像素的屏幕都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询：

@media screen 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(min-width:970px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 970 像素则会告诉浏览器只运用下列 CSS。