之前学移动端适配的时候接触到媒体查询，给不同尺寸的屏幕写不同的css方案，根据媒体查询，决定给该媒体使用哪一套css方案。

媒体查询的使用方法

1.使用外部样式表，link标签引css文件（推荐使用）

    <link rel="stylesheet" media="screen and (min-width:1201px)" href="./testBigScreenRed.css">
    <link rel="stylesheet" media="screen and (min-width:1001px) and (max-width:1200px)" href="./testScreenBlue.css">
    <link rel="stylesheet" media="screen and (max-width:1000px)" href="./testLittleScreenGreen.css">

2.使用内部样式表，style内部写css代码

<style>
        div{
            width: 200px;
            height: 200px;
        }
        @media screen and (min-width:1201px) {
            div{
                background: red;
            }
        }
        @media screen and (min-width:1001px) and (max-width:1200px) {
            div{
                background: blue;
            }
        }
        @media screen and (max-width:1000px) {
            div{
                background: green;
            }
        }
    </style>

如果一个宽度同时匹配了两个，则下面的样式表生效。

参考了文章 www.baidu.com/link?url=FJ…