布局结果图：
响应布局
margin: 0；
padding: 0；
}
html，
body {
height: 100%；
font :20 px/20px ' microsoftyahei '；
}
. row {
width: 960px；
font-size: 30px；
margin : 0自动；
margin-top: 25px；
}
#header{
height: 50px；
}
#header-left{
width: 60%；
height: 50px；
浮点：左；
背景： # 00008 b；
}
#header-right{
width: 30%；
height: 50px；
浮点：轻型；
背景： # 00008 b；
}
#div1{
height: 170px；
color: #fff；
line-height: 170px；
文本对齐3360中心；
后台： # 126a 74；
}
#main{
高： 200 px；
显示： Flex；
justify-content 3360 space-between；
}
#main div{
width: 220px；
height: 180px；
color: #fff；
line-height: 180px；
文本对齐3360中心；
/*浮点：左； */
}
#div2{
后台： # 439 d84；
}
#div3{
后台： # 00ce D1；
}
#div4{
后台： # cd5c 5c；
}
#div5{
后台： # ffff 00；
}
/*0-480手jqddy/
@ mediaonlyscreenand (最小宽度：0 px ) and (最大宽度3360500 px ) {
. row {
width: 100%；
}
#main {
align-items3360中心；
flex-direction: column；
margin-top: 20px；
width: 100%；
高： 790 px；
}
#main div{
width: 100%；
}
}
/*600-750平板电脑，手机横jjdty/
@ mediaonlyscreenand (最小宽度：510 px ) and (最大宽度：750 px ) ) )。
. row {
width: 590px；
}
#main{
flex-wrap: wrap；
justify-content 3360 space-between；
align-content: flex-start；
height: 400px；
}
#main div{
width: 30%；
height: 180px；
玛姬- bottom : 25px；
}
}
/* ipa */
@ mediaonlyscreenand (最小宽度：750 px ) and (最大宽度：780 px ) )。
. row {
width: 600px；
}
#main{
flex-wrap: wrap；
justify-content 3360 space-between；
align-content: flex-start；
height: 400px；
margin-top: 50px；
}
#main div{
width: 44%；
高： 250 px；
玛姬- bottom : 30px；
}
}
/*全振动的蘑菇/
@ mediaonlyscreenand (最小宽度：960 px ) {
. row {
width: 960px；
}
}
1 2 3 4 5