使用佈局轉換的響應式網頁設計

我是新的響應式網頁設計。我想要的輸出是div標籤其中包含深藍色，淺藍色，綠色，紅色應顯示在堆疊順序中，當屏幕寬度小於500像素，即像這個圖像media query less than 500px。使用佈局轉換的響應式網頁設計

當屏幕寬度大於500px時，它應該顯示爲與代碼段輸出相同，但第一個顯示器像這樣顯示wrongly displayed for screen < 500px。

第一個可以通過最小化瀏覽器獲得。我使用的html和css is.pls說明了爲什麼它不能用淡藍色和綠色來顯示。

.container{ 
 

 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 

 
.box{ 
 
    width:100%; 
 
    min-height: 150px; 
 
} 
 

 
.dark-blue { 
 
    background-color: blue; 
 
    } 
 
.light-blue { 
 
    background-color: skyblue; 
 
} 
 
.green { 
 
    background-color: #0C8542; 
 
} 
 
.red { 
 
    background-color: #EC1D3B; 
 
} 
 

 
@media screen and (min-width:500px) 
 
{ 
 
#container2 
 
{ 
 
    width:50%; 
 
} 
 
.dark-blue 
 
{ 
 
    width:50%; 
 
} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Layout Shift</title> 
 
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
 
<link type="text/css" rel="stylesheet" href="main.css"> 
 
</body> 
 
<div class="container"> 
 
    <div class="box dark-blue"></div> 
 
<div class="container" id="container2"> 
 
     <div class="box light-blue"></div> 
 
     <div class="box green"></div> 
 
     </div> 
 
    <div class="box red"></div> 
 
</div> 
 
</body> 
 
</html>

。

來源

2016-10-30 Arul

如果通過.box.dark藍色的CSS取代.dark藍色，會發生什麼？ – mm759

這是怎麼回事？ http://codepen.io/panchroma/pen/NRZMZR

HTML沒有改變，在CSS中我在@media查詢中移動了.container樣式。更改的最終結果是，在視口寬度小於500像素的情況下，.container顯示爲block，並且每個div均爲全寬。

希望這會有所幫助！

CSS

.box{ 
    width:100%; 
    min-height: 150px; 
} 

.dark-blue { 
    background-color: blue; 
    } 
.light-blue { 
    background-color: skyblue; 
} 
.green { 
    background-color: #0C8542; 
} 
.red { 
    background-color: #EC1D3B; 
} 

@media screen and (min-width:500px){ 
    .container{ 
    display:flex; 
    flex-wrap:wrap; 
    } 

    #container2{ 
    width:50%; 
    } 
    .dark-blue{ 
    width:50%; 
    } 
}

來源

2016-10-30 23:54:31

使用佈局轉換的響應式網頁設計

回答

相關問題