html - 在窗口最小化时使用媒体查询调整页面大小

Question

我想知道，有没有一种方法可以让我只使用一个媒体查询，从而在我缩小 html 页面时将我的内容保持在准确的位置？我不确定这是否可行，因为我找不到任何东西。我可以设置最大宽度和最小宽度，当我的页面缩小到一定大小时，它必须使用我分配给它的元素。我只是觉得继续设置页面的宽度有点不整洁。所以我想知道有没有一种方法可以在一个查询中完成所有操作。

这就是我目前使用媒体标签的方式

    @media (max-width: 1024px) and (min-width: 768px) {
    #Logo {
        top: 5px;
        width: 250px;
    }

    #TabBar {
        margin-right: -14em;
    }

    #btnLogout {
        margin-left: -39px;
    }

    #displayBalance {
        margin-right: -95px;
    }
   }
    @media(max-width:1029) {
    #TabBar {
    margin-right:-18em; // like for example here i have to keep on assigning a different width to the same div
    }
}
@media (max-width: 1097px) and (min-width:647px) {

    #btnLogout {
        margin-left: -39px;
    }
}


@media (min-width: 1024px){
    .footer_nav .logo {
        margin-left:20%;
    }
}

或者我应该在 jquery 中做这样的事情吗？

$('#body').css('min-height', '100%');

Answer 1

如果你想让所有内容都占满页面的宽度，只需使用 width:100%;。否则，媒体查询可以非常强大地保持一切完全符合您的要求，所以可以使用 % 值开始，并且只在必要时包括媒体查询？

如果我正确理解你的问题，如果你在 #btnLogout 上为 margin-left 分配了一个 % 值，这应该会响应地改变。如果没有看到您的代码/页面，就很难给出建议。