css3响应式布局

all：所有媒体
braille：盲文触觉设备
embossed：盲文打印机
print：手持设备
projection：打印机预览
screen：彩屏设备
speech：'听觉'类似的媒体类型
tty：不适用像素的设备
tv：电视

#box{width:100px;height:100px;background-color:red;}
@media embossed{
    /*盲文打印机是绿色*/
    #box{background-color:green;}
}
@media tv{
    /*在tv上是粉色*/
    #box{background-color:pink;}
}
@media all{
    /*在所有媒体上是红色*/
    #box{background-color:red;}
}

@media all and (min-width:1201){  }
        not：关键字是用来排除某种制定的媒体类型

@media not tv
        only：只有在特定的某种设备上识别

@media only tv
        媒体特性
        min-width：当屏幕大小 大于等于 某个值的时候识别

        max-width：当屏幕大小 小于等于 某个值的时候识别

        orientation：横竖屏（portrait/landscape）

@media (orientation:portrait) { //竖屏的时候
    div{ background-color: yellow; }
}
@media (orientation:landscape) { //横屏的时候
    div{ background-color: green; }
}

@media all and (min-width:600px){  }

<link rel='stylesheet' href='css/01.css' media='all and (min-width:600px)'  />

<style>
    @import url(01.css) (min-width:400px);
    @import url(02.css) (min-width:600px);
    @import url(03.css) (min-width:800px);
    @import url(04.css) (min-width:1000px);
    body{
        margin: 0;
    }
    div{
        height: 100px;
        background-color: #f00;
        border: 1px solid #000;
        box-sizing: border-box;
        float: left;
    }
</style>

@media screen and (min-width: 1200px) {
    css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
    css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
    css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
    css-code;
}
@media screen and (max-width: 479px) {
    css-code;
}