全屏?xí)r的效果

寬度小于615的效果

屏幕寬度小于465的效果

樣式代碼：

.test {
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding: 10px;
    min-width: 150px;
}
.container {
    width: 100%;
}

@media (max-width:615px ) {
.test {
    float: left;
    width: 33%;
    box-sizing: border-box;
    padding: 10px;
    min-width: 150px;
}
}

@media (max-width:465px ) {
.test {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
    min-width: 150px;
}
}

@media (max-width:315px ) {
.test {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}
}

html代碼

 <div class="container">
           <div class="test" > <img src="home_1.png" style="max-width: 100%;"/> </div>
           <div class="test" > <img src="home_2.png" style="max-width: 100%;"/> </div>
           <div class="test" > <img src="home_3.png" style="max-width: 100%;"/> </div>
           <div class="test" > <img src="home_4.png" style="max-width: 100%;"/> </div>
         </div>