响应式布局 | 易学教程

所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同

响应式布局常用的方法有媒体查询和bootstrap的栅格化系统(一套代码响应大中小不同屏幕的尺寸，当然界面的布局也有所变化)

媒体查询

body {
    margin: 0;
    padding: 0;
}
.contain {
    width: 100%;
}
.head {
    width: 100%;
    height: 50px;
    background-color: cadetblue;
    /* flex-direction: column; */
}
.head-nav {
    width: 180px;
    height: 50px;
    justify-content: space-between;
    display: flex;
    line-height: 50px;
    /* align-items: center; */
}
a {
    text-decoration: none;
    color: white;
    font-size: 16px;
}
.n1 {
    width: 50px;
    height: 50px;
}
.n2 {
    width: 50px;
    height: 50px;
}
.n3 {
    width: 50px;
    height: 50px;
}

.inp {
    float: right;
    width: 150px;
    height: 50px;
    /* border: 1px solid red; */
    margin-top: -50px;
}

input {
    width: 150px;
    height: 40px;
    border-radius: 5px;
    border: none;
}

.middle {
    flex: 1 1 auto;
    display: flex;
    margin-top: 20px;
}

.l1,
.l2,
.l3 {
    width: 180px;
    height: 50px;
    background-color: white;
    margin-top: 10px;
    line-height: 50px;
    text-align: left;
}

p {
    font-size: 16px;
}

1.大屏 (pc)
@media screen and (min-width:960px) 
当是大屏的时候展示所有的内容
@media screen and (min-width:960px) {
.left {
display: flex;
height: 200px;
background-color: cornflowerblue;
flex: 0 0 20%;
flex-direction: column;
align-items: center;
font-size: 16px;
/* justify-content: space-between; */
}
.center {
flex: 1 1 auto;
background-color: darkgoldenrod;
height: 600px;
font-size: 0;
}
.right {
background-color: darkcyan;
flex: 0 0 20%;
height: 300px;
}
/* .middle {
font-size: 0;
} */
.center>img {
width: 25%;
height: 300px;
}
}

2.中屏（pad）
右边的部分会隐藏
//@media screen and (min-width:760px) and (max-width:959px) 

@media screen and (min-width:760px) and (max-width:959px) {
    .left {
        display: flex;
        height: 200px;
        background-color: cornflowerblue;
        flex: 0 0 20%;
        flex-direction: column;
        align-items: center;
    }
    .center {
        flex: 1 1 auto;
        background-color: darkgoldenrod;
        height: 600px;
        font-size: 0;
        /* font-size: 16px; */
    }
    .right {
        background-color: darkcyan;
        flex: 0 0 20%;
        height: 200px;
        display: none;
    }
    /* .middle {
        font-size: 0;
    } */
    .center>img {
        width: 25%;
        height: 300px;
    }
    .middle {
        margin-top: 0;
    }
}


小屏(phone)

@media screen and (max-width:759px) 
@media screen and (max-width:759px) {
    .head {
        height: 100px;
    }
    /* .left {
        width: 100%;
        height: 200px;
        background-color: cornflowerblue;
        
    } */
    .left {
        width: 100%;
        display: flex;
        height: 200px;
        background-color: cornflowerblue;
        /* flex: 0 0 20%; */
        flex-direction: column;
        align-items: center;
        /* justify-content: space-between; */
    }
    .l1,
    .l2,
    .l3 {
        width: 80%;
    }
    .center {
        width: 100%;
        background-color: darkgoldenrod;
        height: 650px;
        font-size: 0;
    }
    .middle {
        /* height: 800px; */
        display: flex;
        flex-wrap: wrap;
    }
    .center>img {
        width: 50%;
        height: 200px;
    }
    input {
        margin-top: 44px;
    }
    .right {
        display: none;
    }
}