HTML5/CSS：根據更改頁面大小更新佈局？

任何人都可以指出我有關響應式網頁設計的好教程/指南嗎？HTML5/CSS：根據更改頁面大小更新佈局？

我對基礎知識非常熟悉，但以下是我在尋找的內容：我已經看到了響應式網頁，它不僅僅是在瀏覽器窗口調整大小時「流暢地」調整自己（這種響應式設計I我很熟悉，並且可以很容易地設置）。他們所做的是保持其原有的（最大的）佈局，直到瀏覽器窗口達到一定的較小尺寸，然後將頁面摺疊成不同的佈局，完全適應瀏覽器窗口的較小尺寸。此更改不僅包括佈局，還包括可見項目的數量以及其他UI元素的激活，以便於在較小窗口中進行導航。

想象一下，撲克牌在窗口中彼此相鄰排列。假設窗口處於全屏模式時，我們假設5張牌相互貼合。現在想象一下窗戶的尺寸減小了。佈局保持不變，直到第一張和最後一張卡幾乎不在可見區域。當窗口達到這個尺寸時，頁面「對齊」到不同的佈局，現在只在中心顯示3張牌，左邊和右邊出現箭頭，表示用戶可以滾動更多的牌。這種響應式設計如何完成？

來源

2012-06-15 user1457366

http://stackoverflow.com/questions/8100040/how-to-dynamically-resize-webpage-layout-according-to-window-size?rq=1，http://stackoverflow.com/questions/10072991 /響應HTML的頁面設計-PC-平板電腦，智能手機與 - 表或表少-FO？RQ = 1 – 2012-06-15 03:40:13

通過使用媒體查詢爲不同屏幕尺寸定義不同樣式，可實現您所描述的貼切行爲。

例如：

@media screen and (min-width: 480px) { 
    .nav { 
     float: none; 
    } 
} 

@media screen and (min-width: 620px) { 
    .nav { 
     float: left; 
    } 
}

Here's a good place to start學習一下吧。

來源

2012-06-15 03:30:25 ataddeini

要添加到第一個絕對正確的答案，你也可以檢查html5樣板。它有一個相當不錯的CSS啓動器來做響應式設計。它對我有很大的幫助，嘿，如果有人已經寫了它，沒有意義再寫一次！

我通常會去http://www.initializr.com/並從那裏獲取響應模板。

來源

2012-06-15 21:11:33 ledgeJumper

HTML5/CSS：根據更改頁面大小更新佈局？

回答

相關問題