Question

当我调整浏览器大小时，我所有的元素都在移动，我不明白为什么。

但是我希望它们在调整浏览器大小时也保持在自己的位置，所以，如何在CSS中做到这一点？

谢谢！

body {
    background-color: #c3ced4;
}

.select_dev {
    width: 380px;
    height: 850px;
    background-color: #142431;
    position: absolute;
    left: 0;
    top: 0;
}

.excel_preview {
    position: absolute;
    top: 70px;
    right: 40px;
    min-width: 1450px;
    min-height: 720px;
    background-color: white;
    border-radius: 8px;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Preview</title>
</head>
    
<body>
    <div class="select_dev">
        <div class="dev">
        </div>
    </div>
    <div class="top-page">
        <div class="top-name">D-FRAGMENT</div>
        <div class="top-choice"></div>
    </div>
    <div class="excel_preview">
    </div>
</body>
</html>

Answer 1

每次将高度或宽度与％配合使用时，都会使它们对窗口大小的变化做出响应，因为它们会根据容器的大小进行调整。

如果希望它们独立于窗口大小，则应为它们指定固定大小（以pxs为单位）。

然后，如果您确实想更改移动设备等设备的大小，则理想的解决方案是实现媒体查询： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

调整浏览器大小时，html页面上的元素会移动

1 个答案: