如何解决网页缩放时文本与图片移位问题？附代码求助

核心问题分析 #

当前布局的移位根源在于三点：

• 固定定位元素宽度总和超出视口（#game 85% + #upgrades 20% = 105%），导致重叠错位
• border-width 使用百分比单位，缩放时边框尺寸剧烈变化挤压内部元素
• 固定像素值的边距（margin-left:50px）在小视口下适配失效

修改后的代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clicker Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="game">
        <h1>Clicker Game</h1>
        <img id="clicker" src="Images/Cursor.png" alt="Clicking Cursor">
    </div>

    <div id="moneybar">
        <p id="money">Money: <span id="money-value">0</span></p>
    </div>

    <div id="upgrades">
        <h2>Upgrades</h2>
        <!-- 后续添加升级按钮的位置 -->
    </div>
</body>
</html>

CSS（修复移位+基础优化）

/* 重置浏览器默认样式，避免布局干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

h1 {
    font-size: 5vw; /* 视口宽度单位替代百分比，缩放时字体自适应 */
    font-family:'Courier New', Courier, monospace;
    text-align: center;
    margin: 2vh 0;
}

#game {
    height: 85%;
    width: 80%; /* 调整为80%，和右侧升级栏20%刚好填满视口 */
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内部元素垂直居中，缩放时位置稳定 */
}

#clicker {
    display: block;
    margin: auto;
    width: 25vw; /* 视口单位替代百分比，不受父容器宽度变化影响 */
    cursor: pointer;
    transition: transform 0.1s ease;
}

#clicker:active {
    transform: scale(0.95); /* 点击缩小反馈 */
}

#upgrades {
    width: 20%;
    height: 100%;
    background-color: #e0e0e0;
    position: fixed;
    top: 0;
    right: 0;
    border-left: 3px solid #888; /* 固定像素边框替代百分比，避免缩放变形 */
    padding: 2vw;
    overflow-y: auto; /* 升级内容过多时可滚动 */
}

#upgrades h2 {
    font-family:'Courier New', Courier, monospace;
    margin-bottom: 2vh;
    border-bottom: 1px solid #888;
    padding-bottom: 1vh;
}

#moneybar {
    width: 100%;
    height: 15%;
    background-color: #e0e0e0;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 3px solid #888;
    display: flex;
    align-items: center; /* 文字垂直居中 */
    padding-left: 3vw; /* 视口单位替代固定像素边距 */
}

#money {
    font-size: 3vw;
    font-family: 'Courier New', Courier, monospace;
}

#money-value {
    font-weight: bold;
    color: #2ecc71;
}

• 交互反馈强化：给点击光标添加旋转、颜色渐变动画，配合点击音效提升手感
• 升级栏美化：给升级按钮统一添加圆角、阴影、悬停效果，每个按钮标注名称、价格、效果描述
• 视觉层次提升：给所有容器添加轻微阴影（box-shadow: 0 2px 5px rgba(0,0,0,0.1)）和圆角，避免单调直角
• 响应式适配：小屏幕下将升级栏移到金钱栏上方，#game 宽度改为100%，#upgrades 高度改为30%，避免布局拥挤
• 状态提示：可购买的升级按钮添加高亮边框或背景色，引导用户操作
• 风格统一：更换像素风格字体，强化点击器游戏的复古感

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