CSS響應式佈局方法

聲明：我不是設計師。我不太瞭解響應式CSS方法。輕鬆點我！我是一位正在嘗試創建收養版式的開發人員。CSS響應式佈局方法

我使用Twitter的引導3，這是我需要在人像模式中的佈局：

Portrait mode image

這裏是它應該在風景模式改變爲：

enter image description here

這裏是「佈局算法」我在我的腦海：

如果屏幕的寬度比768px更高，使用橫向版式，（在橫向模式適用於電話和片劑）的屏幕分成2
否則，如果高度大於400，使用肖像佈局擠壓一切，以適應。
否則，顯示橫向模式，但只顯示圖形，用一個按鈕顯示具有相同選項的疊加層。（不包括在上面的截圖。）

現在我的問題：單獨使用CSS

才能做到這一點？如果是這樣，怎麼樣？（肖像模式中的按鈕在圖表上方和下方移動，並在橫向上均勻分佈。）
否則，使用最小化javascript來實現此響應式佈局的最佳方法是什麼？

來源

2014-01-07 Lakshman Prasad

這可以使用CSS媒體查詢完成 - 這些允許您定義基於不同佈局測量的不同CSS塊。這個主題有很多教程。 –

它在Bootstrap資源網站[[1]（http://getbootstrap.com/css/）]上也有很好的記錄。 – Xareyo

Boostrap在0-767px之間沒有斷點，所以Bootstrap無法使用這個功能，你需要添加這裏討論的css：https：//github.com/twbs/bootstrap/issues/10203並且還使用一些jQuery來克隆圖表的位置，因爲它出現在「In Country」按鈕行之後 – Christina

演示http://www.bootply.com/104401

創建縱向和橫向之間的斷點CSS媒體查詢（例如這480像素的iPhone）。這可以用來餅圖拉向右：

@media (min-width: 480px) { 
    .push{float:right;} 
}

然後另一個查詢告訴引導堆疊在肖像中的列：

@media (max-width: 480px) { 
    .breakpoint{width:100%;} 
}

使用push並相應breakpoint類如圖所示Bootply。

來源

2014-01-08 14:12:20 ZimSystem

glyphicon-heart glyphicon-heart glyphicon-heart :)謝謝！ –

是的，您可以使用CSS3媒體查詢。分別檢查設備寬度和設備高度。

來源

2014-01-07 16:51:44 LorDex

CSS響應式佈局方法

回答

相關問題