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

    1.     <style>
    2.         section{
    3.             font-size: 1cm;
    4.         }
    5.         section::after{
    6.             content: "";
    7.             font-size: 2cm;
    8.             color: red;
    9.         }
    11.         @media screen and (min-width: 600px) and (max-width:800px){
    12.             section::after{
    13.                 content: "------我在600-800之间";
    14.             }
    15.         }
    16.         @media not screen and (max-width: 500px){
    17.             section::after{
    18.                 content: "----------大于500啦";
    19.             }
    20.         }
    22.         @media screen and (orientation:portrait){
    23.             section::after{
    24.                 content: "=======当前是竖屏";
    25.             }
    26.         }
    27.         @media screen and (orientation:landscape){
    28.             section::after{
    29.                 content: "=======当前是横屏";
    30.             }
    31.         }
    32.     </style>

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

    <section>媒体查询：</section>