适配页面尺寸调整Switch屏幕Div容器的大小与位置

问题核心 #

你当前的.screenOn使用固定像素值（top:218px、left:371px等）定位和设置尺寸，这些值不会随图片缩放同步变化，导致页面缩放、窗口调整或更换浏览器时Div错位。

修改后的HTML #

<html>
    <link rel="stylesheet" href="styles.css">
    <script src=""></script>
    <title>Switch Demo</title>
    <body>
        <div class="switchContainer">
            <img src="images/nintendo_switch.png" alt="Nintendo Switch">
            <div class="screenOn"></div> 
        </div>     
    </body>
</html>

修改后的CSS #

/* 让body占满视口，实现容器居中 */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.switchContainer {
    position: relative; /* 作为.screenOn的定位参考容器 */
    max-width: 90vw; /* 限制容器最大宽度，避免图片溢出视口 */
    max-height: 90vh; /* 限制容器最大高度 */
}

.switchContainer img {
    width: 100%;
    height: auto; /* 保持图片原始宽高比 */
    display: block; /* 去除图片默认行内间距 */
}

.screenOn {
    position: absolute;
    /* 以下百分比需根据你图片的原始尺寸计算：
       百分比 = (原固定像素值 / 图片对应维度原始像素值) × 100%
       示例假设图片原始尺寸为1280×720，你需要替换成自己图片的实际尺寸计算 */
    top: 30.28%;
    left: 28.98%;
    width: 57.03%;
    height: 56.67%;
    z-index: 3;
}

.screenOn:hover {
    cursor: pointer;
    background-color: rgba(255, 0, 0, 0.5); /* 半透明红色，方便验证适配效果 */
}

关键调整说明 #

1. 定位上下文设置：给.switchContainer添加position: relative，让内部绝对定位的.screenOn以该容器为参考，而非整个页面。
2. 响应式图片处理：图片用width:100%+height:auto，确保随容器缩放时保持原始比例。
3. 百分比替代固定像素：将.screenOn的定位和尺寸全部改为百分比，确保其与图片缩放比例完全同步。计算时用你原来的固定像素值除以图片对应维度的原始像素值，再乘以100%即可。
4. 容器居中与限制：通过body的flex布局实现容器居中，同时用max-width/max-height避免图片超出视口范围。

验证方式 #

替换完百分比值后，缩放页面、调整窗口大小，.screenOn会始终精准匹配Switch的屏幕区域，不再出现错位问题。

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