布局（响应式布局）

媒询实现响应式

关键词：@media 与and 或，
横竖屏：orientation ：portrait / landscape 竖屏 / 横屏
像素比： -webkit-min-device-pixel-ratio: n

//基本媒询。屏幕最小宽度与最大宽度之间
@media (min-width:768px) and (max-width:1024px) {
    /* min-width 大于等于 768 */
    #list li {
        width: 50%;
    }
}
//横竖屏，横屏竖屏分别设置宽度
//当可视区宽度大于高度，会认定为横屏，当可视区高度大于宽度会认定为竖屏
@media (orientation:portrait) {
    #list li {
        width: 50%;
    }
}
@media (orientation:landscape) {
    #list li {
        width: 25%;
    }
}

媒询的导入方式

根据可视区宽度来判断该引入哪个文件

方式一：通过link标签导入。先加载css再加载html
<link href="css/index.xs.css" rel="stylesheet" />
<link href="css/index.md.css" rel="stylesheet" media="(min-width:992px)" />
<link href="css/index.lg.css" rel="stylesheet" media="(min-width:1400px)" />

方式二：根据@import导入。先加载html再加载css
@import url("css/index.xs.css");
@import url("css/index.md.css") (min-width: 992px);
@import url("css/index.lg.css") (min-width: 1400px);

从小到大响应式布局

@media (min-width:768px) {
    #list {
        margin: 0 20px;
    }
}
@media (min-width:992px) {
    #list {
        margin: 0 auto;
        width: 960px;
    }
}
@media (min-width:1200px) {
    #list {
        margin: 0 auto;
        width: 1180px;
    }
}
@media (min-width:1600px) {
    #list {
        margin: 0 auto;
        width: 1580px;
    }
}