1. 首頁
  2. 問答
  3. 如何使用html/css和javascript製作響應式網站

如何使用html/css和javascript製作響應式網站

2015-11-23 80 views
0

我想知道如何使html/css設計得到響應，以便（如果這是響應手段）div根據屏幕大小進行排列（以防萬一桌面瀏覽器在運行時手動調整大小）。 例如： 我div1，div2，div3設置爲浮動左。他們在我的瀏覽器中顯示爲3列。現在，如果我調整大小（更小的尺寸），我的瀏覽器我想讓div1進入最佳狀態。它下面的div2和div2下面的div2。同樣，如果我調整我的網頁完全我想divs再次出現爲3列。如何使用html/css和javascript製作響應式網站

除了正常的defalut行爲，有什麼辦法通過哪些變化可以分別指定？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 

    <div id="div1" style="width:500px;height:200px;background-color:red;float:left;"></div> 
    <div id="div2" style="width:500px;height:200px;background-color:yellow;float:left;"></div> 
    <div id="div3" style="width:400px;height:200px;background-color:green;float:left;"></div> 

</body> 
</html>

請任何幫助將不勝感激。我對響應式設計佈局完全陌生。

來源

2015-11-23 user3313941

+2

你可以閱讀有關CSS引導http://getbootstrap.com/css/ – Aminesrine

+1

你可以的使用媒體查詢。使用CSS進行響應的方法 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries –

回答

1

響應式佈局的基礎知識是使用像素的百分比，並通過media queries添加斷點。

在你的榜樣，你有3周的div浮動，因此CSS應該是這樣的：

#div1, #div2, #div3 { 
    float:left; 
    height:200px; 
} 
#div1 { 
    background-color:red; 
    width:40%; 
} 
#div2 { 
    background-color:yellow; 
    width:40%; 
} 
#div3 { 
    background-color:green; 
    width:20%; 
}

總是讓你的所有浮動寬度之和100％。

然後像這樣添加一個突破點（或者根據需要儘可能多的）：

@media (max-width: 600px) { 
    #div1, #div2, #div3 {width:100%;} 
    }

，您可以告訴你的瀏覽器更改divs當窗口寬度的css性能爲600像素或更低。在這種情況下，你使每個div都有100％的寬度，所以它們會按照你想要的順序堆疊起來。

JSFIDDLE

來源

2015-11-23 08:53:50

相關問題

 相關問題