CSS3 媒体查询（响应式布局）

一、媒体查询

媒体特性：
                width 视口(窗口)的宽度
                height 视口(窗口)的高度

                min-width 视口的最小宽度（视口大于等于指定宽度时生效）
                max-width 视口的最大宽度（视口小于等于指定宽度时生效）

语法：

@media screen and (min-width: )

@media screen and (max-width: )

媒体类型(media type) ：常用all，screen，print。

all	所有设备
screen	所有电子设备的屏幕的尺寸
print	打印机的屏幕

---

① min-width:1000px

当屏幕的宽度大于1000px时，背景颜色变为粉色

 当屏幕的宽度没有满足1000px时，他的背景颜色没有变为粉色

---

②  @media all and (min-width:700px) and ( max-width:1000px)

所有屏幕大于等于700 ，小于等于1000时，字体颜色都变红

☆ and 的前后都需要空格

---

③

@media screen and (max-width:600px) {

其他元素隐藏

            .a{

                display: none;

            }

之前被隐藏的展开按钮显示

            .item:last-chiled{

              display: block !important;

            }

        }