調整窗口大小后，將div從另一個移到另一個

Question

我有兩個div，A和B。B在A之下。當我將窗口垂直調整得足夠窄時，是否可以將其放在A之上？ 可以通過根據大小隱藏/顯示div來模擬嗎？

Answer 1

您正在談論的問題通常稱為響應式設計 。

下面顯示了示例代碼，演示了您的問題的可能解決方案。 它對window元素使用resize事件，然后根據實際窗口寬度隱藏所選元素。 最后， redesign方法應包含任何適當的邏輯，這些邏輯應根據其實際寬度來設計視圖：

$(document).ready(function () {
    redesign();
    $(window).resize(function(){
        redesign();
    });
});

function redesign(){
    if ($(window).width() < 640) {
        $("#divA").hide();
    }else{
        $("#divA").show();
    }
}

查看jsFiddle示例（顯然是調整窗口大小以查看一些結果）。 如果您有興趣將DOM元素相互關聯起來，請檢查jquery insertBefore方法。