如何編寫響應HTML？

編寫響應式CSS很容易，您只需使用媒體查詢來檢查屏幕大小。如何編寫響應HTML？

但是，如何根據屏幕大小重新排列HTML？根據不同的屏幕尺寸，您可能希望將div放在完全不同的地方。

例如：

說我有一個1000像素屏幕上的佈局如下：

[VIDEO] [SEARCH BAR] 
[LIST OF STUFF] 
[LOG IN/OUT][MENU]

但如果屏幕500像素下調整爲，我想要的內容重新組織成這個佈局：

[MENU] 
[LOG IN/OUT] 
[SEARCH BAR] 
[LIST OF STUFF] 
[VIDEO]

這可能嗎？

來源

2015-12-03 Joe Morano

看看flexboxes –

@frontend_dev這看起來像調整CSS基本相同的東西。我的問題是關於從字面上移動div。我會更新我的問題。 –

除了通過定位，邊距/填充，顯示等方式在頁面上移動東西......我不認爲可以單獨使用html/css來移動整個dom中的項目。我在過去曾經「欺騙」過，用「display：none」來隱藏div，並且只是通過調整大小來爲它們添加「block」，但是這會增加大量冗餘或不必要的代碼。你不得不看javascript以實際移動整個頁面的元素。 – wmeade

你指的什麼是可能的JavaScript，因爲一旦HTML渲染，它不能被修改的，由JavaScript除外。對於響應式設計，您想實現的目標通過常見框架如Bootstrap或最近在CSS中使用flex-box變得簡單。

這樣做的另一個簡單方法是使用css屬性display，如果要根據屏幕大小（媒體查詢，如您所述）隱藏div，您可以將其設置爲none。

希望這有助於！

來源

2015-12-03 00:44:51

您應該指出，使用flexbox，您可以使用訂單屬性重新排列項目 - 這正是OP所要做的。「響應HTML」將是一場噩夢，永遠不會存在;並使用JavaScript重新排列項目會很慢。唯一正確的方法是通過CSS（包括你在第二段中提到的內容）。 – nlaq

如何編寫響應HTML？

回答

相關問題