改變一個固定的HTML代碼的響應格式

Question

我寫的靜態內容的代碼......現在我該怎麼改變它支持移動設備（響應格式） sample code

<div class="box"> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box2"></div> 
    <div class="box2"></div> 
</div> 

CSS：

.box{ 
    width:200px; 
    height:100px;  
    border:1px solid red; 
} 

.box1{ 
    width:100px; 
    height:90px;  
    border:1px solid yellow; 
    margin:5px; 
    float:right; 
} 

.box2{ 
    width:80px; 
    height:25px;  
    border:1px solid green; 
    margin:5px; 
} 

我希望所有的盒子交換resolation ...來調整（盒子的位置是固定的）

Answer 1

可以爲箱體類添加最大寬度。這將根據分辨率調整框的大小。

.box{ 
    width:200px; 
    height:100px;  
    border:1px solid red; 
    max-width:100%; 
} 

.box1{ 
    width:100px; 
    height:90px;  
    border:1px solid yellow; 
    margin:5px; 
    float:right; 
    max-width:40%; 
} 

.box2{ 
    width:80px; 
    height:25px;  
    border:1px solid green; 
    margin:5px; 
    max-width:40%; 
} 

Answer 2

我不知道你所說的「交換resolation」，但看你的佈局是什麼意思，我會先改變固定寬度爲％值。當你縮小瀏覽器窗口時，這本身會使它們變得流暢。

對於移動設備，編寫媒體查詢以定位小寬度，並刪除媒體查詢中的浮動屬性，並將其寬度設置爲100％。所以所有的框都顯示在另一個下面。

通常，我更喜歡在浮動屬性上使用內聯塊。它給了造型更多的靈活性。 只是我2美分。