布局 - 响应式布局媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

媒体查询中可用于检测的媒体特性有 width、height、color 等。

设备类型

Media Type	Description	Media Type	Description
all	所有设备	aural	听觉设备
braille	点字触觉设备	handled	便携设备（手机、平板等）
print	打印预览	projection	摄影设备
screen	显示屏	tty	打字机、终端
tv	电视设备	embossed	盲文打印

关键代码

/* 
    all --> 所有的媒体特性
    and --> 与；其它关键字 还包括not（排除某种设备），only（限定某种设备）
    (min-width:320px) --> 大于等于320px(最小为320px)的媒体特性，媒体特性一般放在括号中，括号中不以分号结尾
*/
@media all and (min-width:320px){
    body{
        background-color:red;
    }
}

断点示意图

通过媒体查询实现响应式布局，主要是给定了设备的媒体特性，当满足其媒体特性时，便会展示出应对的CSS布局样式，因此，不同的媒体特性之间切换的时候，边就有了某个切换的临界点，这个就是媒体相应的断点，若需让CSS能够尽可能地满足不同的设备的媒体特性，其断点就需要更加丰富和准确，但要考虑代码是否冗余。

响应式断点.png

响应式布局特点

优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题
缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；本质上是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

示例 - 横竖屏检测

横屏：垂直边小于水平边 @media screen and (orientation:portrait){...}
竖屏：垂直边大于水平边 @media screen and (orientation:landscape){...}

横竖屏检测.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        section{
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        div{
            height: 100px;
            display: flex;
            flex-flow: row wrap;
            flex: auto;
            justify-content: center;
            align-content: center;
            margin: 1px;
            font: normal bolder 14px/16px Aria;
            color: white;
        }
        div::before{
            width: 100%;
            flex: none;
            text-align: center;
        }
        @media screen and (orientation:portrait) {
            div{
                width: 48%;
                background-color: #FF6F91;
            }
            div::before{
                content: "orientation:portrait";
            }
        }
        @media screen and (orientation:landscape) {
            div{
                width: 30%;
                background-color: #D65DB1;
            }
            div::before{
                content: "orientation:landscape";
            }
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </section>
</body>
</html>

布局 - 响应式布局