布局结果图：
电脑全屏：
手机浏览：
竖屏：
横屏：
代码：
响应式布局
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
font: 20px/20px "microsoft yahei";
}
.row {
width: 960px;
font-size: 30px;
margin: 0 auto;
margin-top: 25px;
}
#header{
height: 50px;
}
#header-left{
width: 60%;
height: 50px;
float: left;
background: #00008B;
}
#header-right{
width: 30%;
height: 50px;
float: right;
background: #00008B;
}
#div1{
height: 170px;
color: #fff;
line-height: 170px;
text-align: center;
background: #126a74;
}
#main{
height: 200px;
display: flex;
justify-content: space-between;
}
#main div{
width: 220px;
height: 180px;
color: #fff;
line-height: 180px;
text-align: center;
/* float: left; */
}
#div2{
background: #439d84;
}
#div3{
background: #00CED1;
}
#div4{
background: #CD5C5C;
}
#div5{
background: #FFFF00;
}
/*0-480手机*/
@media only screen and (min-width:0px) and (max-width:500px) {
.row {
width: 100%;
}
#main {
align-items: center;
flex-direction: column;
margin-top: 20px;
width: 100%;
height: 790px;
}
#main div{
width: 100%;
}
}
/*600-750平板，手机横屏*/
@media only screen and (min-width: 510px) and (max-width: 750px) {
.row {
width: 590px;
}
#main{
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
height: 400px;
}
#main div{
width: 30%;
height: 180px;
margin-bottom: 25px;
}
}
/* ipa */
@media only screen and (min-width: 750px) and (max-width: 780px) {
.row {
width: 600px;
}
#main{
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
height: 400px;
margin-top: 50px;
}
#main div{
width: 44%;
height: 250px;
margin-bottom: 30px;
}
}
/* 全屏 */
@media only screen and (min-width:960px) {
.row {
width: 960px;
}
}
12345
标签：CSS3,flex,width,height,案例,background,main,margin,响应
来源： /czk1634798848/p/12256586.html
