1.响应式所具有的特点

  1. 1、网页的宽度自动调整
  2. 2、尽量少用绝对宽度
  3. 3、字体要使用rem、em做为单位 (rem=父级的font-size*rem)
  4. 4、布局要使用浮动、弹性布局

2.媒体查询：根据一个或多个基于设备类型、具体特点和环境来应用样式

  1. 1、媒体类型
  2. 2、媒体特性
  3. 3、逻辑运算符

3.@规则

  1. @chartset   定义编码
  2. @import     引入css文件（css模块化）
  3. @font-face  自定义字体
  4. @keyframes  animation里的关键帧
  5. @media      媒体查询

例：

<style>
html {
    font-size: 50px;
}
div {
    font-size: 3rem;
}
@media all {
    div {
        font-size: 3rem;
    }
}
@import url('css/bootstrap.css')(min-width:200px);/* 屏幕宽度要大于200px，才能引入另一个css文件 */
@media all and (min-width:400px){
        /* all：代表所有的设备 */
        div{
            font-size: 100px;
        }
    }
</style>
<link rel="stylesheet" href="css/bootstrap.css" media="all">

4.媒体类型

all             所有设备
print           打印机设备
screen          彩色的电脑屏幕
speech          听觉设备（针对有视力障碍的人士，可以把页面的内容以语音的方式呈现的设备）
注意：tty、tv、projection、handheld、braille、embossed、aural等几种类型在媒体查询4中已经废弃

例：

<style>
div{
    width: 200px;
    height: 200px;
    background: green;
}
@media print{
    div{
        font-size: 80px;
    }
}
@media screen{
    div{
        width: 300px;
        height: 300px;
        background: pink;
    }
}
@media all{
    div{
        width: 400px;
        height: 400px;
        background: grey;
    }
}
</style>
</head>
<body>
<div>媒体类型</div>
</body>

5.媒体特性

width   宽度
        min-width   最小宽度，宽度只能比这个大
        max-width   最大的宽度，宽度只能比这个小
height  高度
    min-width   最小高度，高度只能比这个大
    max-width   最大的高度，高度只能比这个小
orientation     方向
    landscape   横屏（宽度大于高度）
    portrait    竖屏（高度大于宽度）
aspect-ratio    宽高比
-webkit-device-pixel-ratio  像素比（webkit内核的私有属性）

例：

<style>
    /* 400-500之间是默认的 */
    div{
        width: 100px;
        height: 100px;
        background: red;
    }
    /* 屏幕尺寸大于500的时候满足 */
    @media (min-width:500px){
        div{
            background: green;
        }
    }
    /* 屏幕尺寸小于400的时候满足 */
    @media (max-width:400px){
        div{
            background: blue;
        }
    }
    /* 横屏的时候满足 */
    @media (orientation:landscape){
        div{
            width: 400px;
            height: 100px;
        }
    }
    /* 竖屏的时候满足 */
    @media (orientation:portrait){
        div{
            width: 100px;
            height: 400px;
        }
    }
    /* 宽高比为4：3的时候满足，800*600的时候是4：3 */
    @media (aspect-ratio:4/3){
        div{
            border: 10px solid #000;
        }
    }
    /* 当像素比为2的时候，满足 */
    @media (-webkit-device-pixel-ratio:2){
        div:after{
            content: '陈学辉';
            font-size: 50px;
        }
    }
</style>
</head>
<body>
<div>媒体特性</div>
</body>

6.逻辑运算符：用来做条件判断

and     合并多个媒体查询（并且的意思）
,       匹配某个媒体查询（或者的意思）
not     对媒体查询结果取反
only    仅在媒体查询匹配成功后应用样式（防范老旧浏览器不看条件直接解析）

例：

<style>
    div{
        width: 200px;
        height: 200px;
        background: red;
    }
    /* 屏幕的尺寸比700大的时候以及横屏的时候满足 */
    @media all and (min-width:700px) and (orientation: landscape){
        div{
            background: green;
        }
    }
    /* 屏幕尺寸比800小，或者屏幕为横屏的时候满足 */
    @media (max-width:800px),(orientation: landscape){
        div{
            background: pink;
        }
    }
    /* 屏幕的尺寸要大于800的时候，整个才满足 */
    @media not all and (max-width:800px){
        div{
            background: blue;
        }
    }
    @media only screen and (min-width:1000px){
        div{
            background: grey;
        }
    }
</style>
</head>
<body>
<div>逻辑运算符</div>
</body>

7.媒体查询应用

<style>
    div{
        padding: 50px 0;
        border: 1px solid #000800;
    }
    div:after{
        content: '这是一所房子';
    }
    /* 小于1000的尺寸就满足 */
    @media all and (max-width: 1000px){
        div{
            background: green;
        }
        div:after{
            content: '哇，房子好大哦，可以放下坑了';
        }
    }
    /* 小于800的时候就满足 */
    @media all and (max-width:800px){
        div{
            background: khaki;
        }
        div:after{
            content: '喔，房子变小了，只能放一张双人床';
        }
    }

    /* 尺寸小于500就满足 */
    @media all and (max-width:500px){
        div{
            background: hotpink;
        }
        div:after{
            content: '哎，房子更小了，只能放下一张单人床';
        }
    }
    /* 小于300的时候满足 */
    @media all and (max-width: 300px){
        div{
            background: turquoise;
        }
        div:after{
            content: '咦，房子也忒小了，床都放不下';
        }
    }
</style>
</head>
<body>
<div></div>
</body>

8.响应式例子

<style>
    body{
        margin: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background: green;
        float: left;
        border: 1px solid #000;
        box-sizing: border-box;
    }
    /* <400，显示1个 */
    @media all and (max-width:400px){
        div{
            width: 100%;
        }
    }
    /* 400-600，显示2个 */
    @media all and (min-width:400px){
        div{
            width: 50%;
        }
    }
    /* 600-800，显示3个 */
    @media all and (min-width:600px){
        div{
            width:33.3%;
        }
    }
    /* 800-1000，显示4个 */
    @media all and (min-width:800px){
        div{
            width:25%;
        }
    }
    /* 1000以上，显示5个 */
    @media all and (min-width:1000px){
        div{
            width: 20%;
        }
    }
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>