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指定了％值，我可以正确理解您的问题，这应该会相应地改变。如果没有看到你的代码/页面，就很难建议。

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

1 个答案: