什么是响应式？

响应式页面都是自适应布局。

响应式的布局是在变得，在移动端呈现一种样式，在pc端呈现另一种样式。

css基础功很重要。

媒体查询的几个概念：

        1.最小768       min-width:768                              就是 >=768                   就是最小的宽是768

        2.最大992   max-width:992                                 就是<=992                  就是最大的宽是992

        3. and   min-width:768 and max-width:992          就是768 =<x<=992     介于768和992之间

        4.not(取反--了解，实际项目很少用)。  5.only（不支持的忽略--了解，实际项目很少用）

写法：（当窗口改变的时候，）

      1.   1.1@media (min-width:768px){}----------

         例子：@media (min-width:768px){

                        .box{

                                        background:red;

                                }

                }

           1.2 @media(min-width:768px) and (max-width:992px){}-------

        例子：@media(min-width:768px) and (max-width:992px){

                                .box{

                                        background:yellow;

                                        }

                         }

2.device-width:设备的宽度。min-device-width:设备的最小实际分辨率（宽度）。max-device-width:设备的最大实际宽度（分辨率）。

3.@media(orientation:landscape) 横屏  @media(orientation:portrait) 竖屏--了解，实际项目很少用

        横屏例子：@media (min-width:768px) and (orientation:landscape){}

4.写响应式前的准备工作：

        1.新建文件夹，命名为“项目名称”。里面新建3个文件夹，分别是  images、css、js。

        2.css文件夹下新建4个css页面，分别是 common.css、pad.css、pc.css 、pc-w.css。(注意样式表的引入顺序，后引入的会替换先引入的样式表哦！)

例子：注意：手机端用公用样式表（无宽度布局---common.css）、pad端用 竖屏 最小768 （横屏的可以不写，可以用成pc端的样式了----pad.css）、pc端用 宽屏 最小992（pc.css）、pc-w端是pc宽屏（有1210或1200或1190，一般用1190----pc-w.css）

           <link rel="stylesheet" type="text/css" href="common.css" >
           <link rel="stylesheet" type="text/css" href="pad.css"   media="(min-width:768px)">
           <link rel="stylesheet" type="text/css" href="pc.css"     media="(min-width:992px)">
           <link rel="stylesheet" type="text/css" href="pc-w.css"  media="(min-width:1190px)">