媒体查询

响应式布局之媒体查询

一、什么是响应式布局？

响应式布局指的是在同一个页面适用于不同的屏幕尺寸下有不同的布局；
传统的开发方式是pc端开发一套，移动端开发一套就够,缺点css比较重要;

二、响应式布局的实现方案--媒体查询

css3 Media Query（媒体查询）@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适用于pc端，移动端等，在调整浏览器的大小时，页面会根据媒体查询的宽度和高度来重新布置样式；
媒体查询可以用于自动检测很多东西：自动检测viewport（视图窗口）的宽度和高度，设备的宽度和高度：旋转方向（智能手机横屏或竖屏）：分辨率大小；

三、css3语法规则

直接写在css样式表中:

@media mediatype 操作符 (media feature) { CSS-Code } 如何理解@media的语法规则:
使用媒体查询必须以@media开头；
然后指定设备类型（媒体类型 mediatype）；
接着是括号（）里面是规定媒体/设置特征（media feature），媒体特征的书写格式与css样式类似，都是属性名：属性值（例如：max-width：500px）；
最后跟着的是大括号{ css-code },里面放的是要设置的css样式 逻辑运算符:
not 用来排除某种设备/和当前条件进行取反；
例如：排除打印设备@media not print；条件取反： @media not and （max-width：500px）；
and 媒体查询中使用来连接多种媒体特性，一个媒体查询中可以包含0或多个表达式，必须条件表达式都满足的情况下才执行样式表；
"," 媒体查询中使用来连接多种媒体特性，一个媒体查询中可以包含0或多个表达式，条件表达式只要满足一个即可执行表达式；
only：用以指定某特定媒体设备； css媒体类型 MediaType
all ：适用于所有的设备类型；
print：适用于打印机和打印预览；
screen：适用于电脑屏幕，平板电脑，智能手机等；
speech：使用于屏幕阅读器；

针对不同的媒体设备外部引入不同的样式表（stylesheet）
``<link rel="stylesheet" media="mediatype and|,|only|not (max-width:600px)" href="./css/index.css">``
定义媒体查询部分放在标签内，用media属性标签；

@media：媒体查询，可以针对不同的媒体类型定义不同的样式；
screen：表示电脑，平板，智能手机显示屏，包括有关客户端显示屏的信息；
在HTML文件中不能直接使用 > 和 < 符号；
min- 相当于大于等于即 >= ；
max- 相当于小于等于即 <= ;
操作符：可以用来构建复杂的媒体查询；
and：所有的条件都成立的时候，才能使用样式表；
','：有一个条件成立，就可以使用样式表；
not：否定条件，用于对媒体查询条件进行取反

@media screen and (min-width:700px) and (max-width:800px){  
                section::after{
                    content: "------我在700-800之间";
                }
            }
            @media not screen and (max-width: 500px){
                section::after{
                    content: "--------小于500啦";
                }
            }

orientation：用来判断设备是横屏还是竖屏；
portrait：竖屏；
landscape：横屏；

@media screen and (orientation:portrait){
                section::after{
                    content: "======当前是竖屏";
                }
            }
            @media screen and (orientation:landscape){
                section::after{
                    content: "======当前是横屏";
                }
            }