使用查詢佈局而不是使用CSS佈局

Question

我意識到應嚴格區分網站的佈局和功能。佈局應該用CSS和網站的功能完成，比如點擊擴展移動菜單，應該用JS完成。 參考：1。 & 2。

我經常看到的情況爲響應佈局是具有各種媒體查詢，其中只在類名是不同的列類，但是寬度值是相同的。

這就導致了HTML中的

<div class="container small-query-columns-4 medium-query-columns-6 large-query-columns-12><p>Responsive paragraph..</p></div>. 

形式難道是可以接受的，而不是始終定義相同的寬度爲各種媒體查詢列，只是做一個最小的CSS網格，其中列班寬度定義爲一次，然後動態地將這些每個媒體查詢與查詢？

我知道這個遺址從佈局（CSS）和功能（JS）上面給出的分離，儘管這將意味着更清潔的HTML，而這每各媒體查詢加少得多CSS爲好。每個媒體查詢也只能調用一次，所以用最小的CSS文件來下載的數量也會少得多。是的，當然，這意味着該網站是JS取決於。

Answer 1

這不是壞主意，但我認爲這也不是好主意。幾周前我曾想過類似的事情。我想讓CSS在瀏覽器中通過JS在幾個循環中編譯，然後附加到頭部。但經過深思熟慮，我決定不這樣做。

我知道，你可以回退和一些花哨的東西，所以它在有或無的js每一個瀏覽器，但我看了看我的網格。它不到10KB。這是一個有趣的想法，但它並不像工作那麼繁瑣。保持你的HTML有組織，你不會遇到太多的CSS類的問題。你必須讓某個使用你的「框架」的人在特定的斷點處定義寬度。最簡單的事情就是寫一個類名。

想想看，當你使用例如引導，並希望有移動12列，你只是不定義它，它會自動落入該寬度。很多時候它足以用css類定義最多2個斷點。

當我想到enquirejs時，我認爲它可以用於在手機上隱藏滑塊。當你只是顯示：沒有它仍然在運行和更改類。如果您有類似的東西需要刪除，因爲移動不是很好的運行環境，您可以使用查詢來禁用它。另一個例子是mansory網格，您可以通過enquirejs啓動和禁用該網格。

基本上，你可以使用它，如果你有一些已經js依賴，並希望在不同的屏幕上定製它，或給予不同的行爲，因爲如果你只是在窗口加載或文檔加載設置的東西，你有一個問題與某人誰調整窗口。在這裏你可以使用它。