Flex布局练习（三） - 响应式布局

一、响应式布局

1.1 布局特点

确保一个页面在所有的终端上，都能显示出令人满意的效果

1.2 设计思路

使用%或rem作为单位

1.3 代码案例

layout-1.html

    
    
    
    
    
    
    
    


    

        

        

            

                
分类1
                
分类2
                
分类3
                
分类4
                
分类5
                
分类6
            
            

                
图片
                
图片
                
图片
                
图片
                
图片
                
图片
                
图片
                
图片
                
图片
            
        
    

big.css

*{
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
}
.layout{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
}
.top{
    width: 100%;
    flex: 0 0 50px;
    margin: 0 auto;
    background-color: skyblue;
}
.main{
    flex: 0 0 100%;
    display: flex;
}
.main div:nth-child(1){
    flex: 0 0 10%;
    background-color: #f5f5f5;;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid red;
    border-right: 1px solid red;
}
.main div:nth-child(1) li{
    flex: 0 0 100%;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-bottom: 1px solid red;
}
.main div:nth-child(2){
    flex: 0 0 90%;
    background-color: #f5f5f5;;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.main div:nth-child(2) li{
    flex: 0 0 30%;
    height: 120px;
    text-align: center;
    background-color: skyblue;
    margin-top: 10px;
    
}

small.css

*{
    margin: 0px;
    padding: 0px;
    background-color: #f5f5f5;
}
.layout{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
}
.top{
    width: 100%;
    flex: 0 0 50px;
    margin: 0 auto;
    background-color: skyblue;
}
.main{
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.main div:nth-child(1){
    flex: 0 0 100%;
    background-color: #f5f5f5;;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid red;
    border-right: 1px solid red;
    align-content: flex-start;
}
.main div:nth-child(1) li{
    flex: 0 0 30%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid red;
}
.main div:nth-child(2){
    flex: 0 0 100%;
    background-color: #f5f5f5;;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.main div:nth-child(2) li{
    flex: 0 0 30%;
    height: 120px;
    text-align: center;
    background-color: skyblue;
    margin-top: 10px;
}

页面效果展示 - 页面宽度高于1000px - 运用big.css

 页面效果展示 - 移动端 页面宽度高于400px，小于600px - 运用small.css