新手求助：如何让HTML/CSS/Bootstrap页面适配任意屏幕分辨率

你的代码核心问题在于使用了绝对定位+固定宽高/位置，这完全破坏了Bootstrap的响应式布局机制——绝对定位会让元素脱离文档流，无法跟随屏幕尺寸自动调整位置和大小。以下是针对性的修改方案：

核心修改思路 #

• 移除所有position: absolute、固定width/height、固定top值的内联样式
• 用Bootstrap原生的布局类、响应式工具类来控制元素的位置、尺寸和间距
• 利用Bootstrap提供的响应式组件类实现自适应

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Untitled</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <style>
        body {
            background: #fadc74;
            min-height: 100vh;
            padding-top: 2rem;
        }

        .btn-solo {
            background-color: #52D2B3;
            background-image: url('C:/Users/BIS PLUS/Desktop/Maquette Traveler to CHINGUIT/img/no-alarm.png');
            background-position: -9px -7px;
            background-repeat: no-repeat;
            background-size: 59px 46px;
            padding-left: 41px;
            font-weight: 550;
        }

        .btn-multi {
            background-color: #D8DB36;
            font-weight: 550;
        }

        .btn-defi {
            background-color: #FFCDCD;
            font-weight: 550;
        }

        .btn-classement {
            background-color: #FF9211;
            font-weight: 550;
        }

        .custom-btn {
            max-width: 500px;
            border-radius: 20px;
            padding: 0.75rem 1rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 响应式Logo -->
        <div class="row justify-content-center mb-5">
            <img src="/img/Logo.png" class="img-fluid" alt="Logo" style="max-width: 370px;">
        </div>

        <!-- 按钮组 -->
        <div class="row justify-content-center">
            <div class="col-12 col-md-8">
                <button class="btn btn-solo shadow custom-btn w-100 mb-4" type="button">SOLO LIBRE</button>
                <button class="btn btn-multi shadow custom-btn w-100 mb-4" type="button">MULTIJOUEURS</button>
                <button class="btn btn-defi shadow custom-btn w-100 mb-4" type="button">DÉFI CONTRE LA MONTRE</button>
                <button class="btn btn-classement shadow custom-btn w-100" type="button">CLASSEMENT DES JOUEUERS</button>
            </div>
        </div>
    </div>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

关键修改点说明 #

1. 响应式图片：添加img-fluid类，让图片自动适配容器宽度，同时用max-width: 370px限制最大尺寸，避免在大屏上过度放大。
2. 按钮自适应：
   • 用w-100让按钮占满父容器宽度，配合col-12 col-md-8控制按钮组的最大宽度，在小屏上全屏显示，大屏上限制宽度。
   • 自定义.custom-btn类设置max-width: 500px，确保按钮不会太宽；用padding代替固定高度，让按钮高度随内容自适应。
3. 布局与间距：
   • 用row justify-content-center实现元素居中，mb-*类控制垂直间距，代替原代码中固定的top值。
   • 给body添加min-height: 100vh确保页面占满屏幕高度，padding-top避免内容贴顶。
4. CSS错误修正：把background-image: src=url(...)改为正确的background-image: url('...')。

内容的提问来源于stack exchange，提问作者Dah Sidi Abdallah