html页面随窗口大小改变

作者：还依然存在发布日期:2025-05-24 浏览:97

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML页面随窗口大小改变</title>
    <style>
        /* 使用媒体查询来调整不同屏幕尺寸下的样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 5px;
            }
        }

        /* 使用百分比和弹性布局使元素适应窗口大小 */
        .box {
            background-color: lightblue;
            width: 30%;
            padding: 20px;
            margin: 10px;
            float: left;
        }

        @media (max-width: 768px) {
            .box {
                width: 45%;
            }
        }

        @media (max-width: 480px) {
            .box {
                width: 100%;
                float: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

解释说明

HTML结构:
- 页面包含一个<div>容器，里面包含了三个盒子（.box），每个盒子都有固定的宽度、内边距和外边距。
CSS样式:
- 使用了媒体查询（@media）来根据不同的屏幕宽度调整样式。
- .container类设置了最大宽度为1200px，并居中显示。在较小的屏幕上，减少内边距以适应更小的空间。
- .box类使用了固定宽度（30%），并在较小的屏幕上调整为45%，最后在非常小的屏幕上变为100%宽度并且取消浮动，使其堆叠显示。

通过这种方式，页面可以根据浏览器窗口的大小自动调整布局，确保在不同设备上都能有良好的显示效果。

上一篇：html 播放器

下一篇：html图片放大缩小代码