如何使用CSS按百分比定位按钮，适配屏幕缩放

问题分析 #

你当前用px固定边距定位按钮，屏幕缩放时必然位置错乱。完全不需要通过JS获取屏幕尺寸计算位置，用CSS的绝对定位结合百分比/视窗单位就能轻松实现适配。

解决方案 #

你的body已经设置了position: relative，这为绝对定位的按钮提供了完美的参考容器。只需修改按钮的定位属性，替换原有的margin为百分比或视窗单位即可：

修改后的按钮核心CSS

.ExitButton {
    position: absolute;
    cursor: pointer;
    text-align: center;
    font-size: 10px;
    font-family: 'Archivo Black', sans-serif;
    color: #6B7075;
    border-color: transparent; 
    background-color: transparent;
    /* 用百分比替换固定px边距，随父容器尺寸自动调整 */
    bottom: 25%; /* 距离底部占body高度的25% */
    left: 12%; /* 距离左侧占body宽度的12% */
    transition-duration: 0.5s;
}

.ExitButton:hover {
    background-color: rgb(150, 5, 5);
    transition-duration: 0.5s;
}

可选：视窗单位精准定位

如果需要更贴合屏幕整体尺寸的定位，可以使用视窗单位：

• vh：等于视窗高度的1%
• vw：等于视窗宽度的1%

示例：

.ExitButton {
    bottom: 30vh; /* 距离底部30%的屏幕高度 */
    left: 10vw; /* 距离左侧10%的屏幕宽度 */
    /* 其他属性保持不变 */
}

为什么这方法有效 #

• position: absolute的元素会相对于最近的position: relative父元素（此处为body）定位
• 百分比单位基于父容器尺寸计算，视窗单位直接关联屏幕视窗尺寸，两者都能随屏幕缩放自动调整位置
• 全程无需JS介入，性能更好且代码更简洁

完整代码参考 #

index.html

<body>
    <webview src="https://bapbap.gg"></webview>
    <style>
        .ExitButton {
            position: absolute;
            cursor: pointer;
            text-align: center;
            font-size: 10px;
            font-family: 'Archivo Black', sans-serif;
            color: #6B7075;
            border-color: transparent; 
            background-color: transparent;
            bottom: 25%;
            left: 12%;
            transition-duration: 0.5s;
        } 
        .ExitButton:hover {
            background-color: rgb(150, 5, 5);
            transition-duration: 0.5s;
        }
    </style>
    <button class="ExitButton" onclick="alert('Are you sure you want to exit BapClient?')">EXIT</button>
</body>

style.css

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    height: 100vh;
    position: relative;
}

webview {
    flex: 1;
}

内容的提问来源于stack exchange，提问作者Ian