10.flex-------06.响应式布局

        1.响应式布局：可以根据不同的设备或窗口大小呈现不同的效果；响应式布局可以使同一网页适用于不同的设备；响应式布局的关键是媒体查询；使用媒体查询可以为不同的设备或设备不同的状态分别设置样式。

        2、媒体查询：

                语法：，@media 查询规则{}

                媒体类型：all----所有媒体设备

                                  print----打印机设备

                                  screen---带屏幕设备

                                  speech----屏幕阅读器设备

                后面可以跟多种媒体类型，中间用逗号隔开，他们之间为或的关系；他们之间也可以使用and连接，表示与的关系；在媒体类型前面还可以加上olny，表示只有，与不加only效果一样，只是用来兼容老版本的浏览器。

 

 

        3、媒体特性：

                        width----设置视口宽度

                        height----设置视口高度（我们一般只对宽度进行设置，而且这两个只是在某个点是使样式进行改变）

                        min-width---最小视口宽度

                        max-width---最大视口宽度

        用法：@media（条件）{满足条件指定的样式}

 

注意：

        a. 前后该语句并不会覆盖，而是或的关系，下面这两个一个是宽度大于等于200px，设置样式，一个是大于等于400px设置样式，或起来，是大于200px执行样式

         b.可以指定多个条件，不同条件之间既可以用都逗号连接（条件之间为或的关系），也可使用and连接（条件之间为与的关系；

                条件之间用都逗号连接：

                 条件之间使用and连接：

        c. 使用olny screen也得用and与后面的条件连接，表示仅屏幕设备而且满足条件的设置样式

         d. not的使用要注意，指的是不满足not后面所有条件的设置相应的样式