页面响应式布局，随手笔记

<link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">
可以控制屏幕多大尺寸的时候是否加载此css文件

<style> 内联media记得加@
    @media screen and (min-width: 640px) {
        body{
            background-color: antiquewhite;
        }
    }

@media screen and (min-width: 960px) {***} 
css文件中添加多个，设置不同布局。

.menu{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap;

}
.menu li{
    height: 40px;
    text-align: center;
    line-height: 40px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
}
.menu li a{
    text-decoration: none;
    color: #000;
}
.menu li:nth-child(1){
    background-color: bisque;
}
.menu li:nth-child(2) {
    background-color: aqua;
}

.menu li:nth-child(3){
    background-color: #4b0dff;
}
.menu li:nth-child(4){
    background-color: #ff1829;
}
.menu li:nth-child(5){
    background-color: #fffdfe;
}
.menu li:nth-child(6){
    background-color: #5affff;
}
@media (min-width: 480px){
    .menu li{
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 50%;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
    }
}
@media (min-width: 700px) {
    .menu {
        -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    }
}

body{
    padding: 0;
    margin: 0;
}
h1{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: black;
    box-shadow:0 2px 6px rgba(0,0,0,.5);
    top:0px;
    margin-top: 0;
    padding-top: 0;
    position: fixed;
}
.pic{
    width: 90%;
    margin: 50px auto;
    column-count: 1;
    column-gap: 20px;
    list-style-type: none;
    column-rule: 10px dashed red;
}
.pic li{
    margin-top: 10px;
}

@media (min-width: 600px) {
    .pic {
        column-count: 3;
    }
}
@media (min-width: 800px) {
    .pic {
        column-count: 4;
    }
}

使用bootstrap开发前端页面，快速高效，和Swift宗旨一样，嘿嘿