基於關鍵變量的CSS調整

Question

我已經構建了一個動態調整大小的網格佈局，可以在任何大小的分辨率（手機，平板電腦，桌面）中合理地適應並處理大小調整，同時接近像素完美（對不起， m OCD - 我說「接近」，因爲我的數學現在被打破了，你不能在一個奇數大小的容器內放置兩個均勻大小的元素，而一邊沒有填充1px）。

無論如何，下面是我用JavaScript入侵的鏈接。這是我試圖拉開的一個例子。稍微調整底部窗格的寬度以查看我要做什麼。

http://jsfiddle.net/langdonx/uFW2C/2/

它這是自被移植到角有些難看手動的JavaScript，但還是醜陋的JavaScript計算所有的樣式保持。

所以我的問題 ...我可以把它關閉嚴格的CSS？或者更多的CSS和更少的JavaScript？我的意思是根據屏幕寬度動態調整大小的單元格？

這裏是業務規則：

• 最大單元格寬度：320個像素
• 每行最小＃電池：2
  • 這可能是不可能的CSS，所以我會在我的Galaxy Nexus（其portait模式爲360px寬）的最小單元格寬度：178上進行處理時的精細度：
• 單元格邊框：與2px的輪廓細胞之間
• 可見保證金5PX：3px的（保證金實際上是5像素，但outline滲出）

在這個例子中，我在重繪每次調整大小的細胞，但在我的Angular版本中，我相信只是樣式會更新。也就是說，我可能會在重新調整大小時重新繪製table，但我只需根據文檔寬度計算單元格寬度，以及...我不會爲使用table而感到興奮。 = [

末端瘋狂咆哮

Answer 1

媒體查詢

CSS media queries可能讓你很接近一個只CSS的解決方案。

這裏的關鍵概念是根據瀏覽器的寬度使用不同的佈局網格來改變列的數量。

媒體查詢是根據瀏覽器寬度更改佈局的自然CSS方式。而且他們不需要JavaScript。如果您使用一組媒體查詢（每個查詢的目標是不同的瀏覽器寬度範圍）來控制使用哪個佈局網格，那麼每個網格所要做的就是響應 - 每列的百分比寬度，並讓內容拉伸以填充列寬。

響應式設計

現在的問題就是：是否有可能自動伸展每條內容單獨使用CSS來填補列？這取決於內容的類型，它是如何預期，當它延伸到行爲，以及是否有任何空間與圖形設計妥協。

通常，對於響應網站的圖形設計，必須定製，以滿足侷限性響應式設計的（用具有什麼不可行一個粗略的想法的平面設計師，什麼是不）。但是......不能自動完成的任何事情都可以使用JavaScript來完成。

企圖舒展內容相關搜索詞：響應式設計，自適應的內容，Fluid Grid

注：「列」在這種情況下，可能只意味着用於浮動容器的百分比寬度爲每件內容。傳統意義上，它不一定意味着「物理」欄目。