如何限制<body>宽度，窗口较小时自动占满视口宽度？

当前元素设置为55vw宽度，窗口宽度充足时能保持居中的窄布局，但窗口缩窄后需要让它自动占满整个视口宽度（100vw）。可以通过CSS媒体查询实现这个需求：

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <style>
            html {
                background-color: lightgreen;
            }

            body {
                background-color: lightblue;
                width: 55vw;
                margin: 0 auto;
            }

            main {
                background-color: orange;
                margin: 1em;
            }

            /* 媒体查询：当视口宽度≤768px时应用以下样式 */
            @media (max-width: 768px) {
                body {
                    width: 100vw;
                    margin: 0;
                }
            }

        </style>
    </head>
    <body>
        <main>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </main>
    </body>
</html>

说明 #

• 默认状态下，body保持55vw宽度，通过margin: 0 auto实现居中，适配宽屏场景
• 添加@media (max-width: 768px)媒体查询，指定当视口宽度小于等于768px时，将body的宽度改为100vw，同时去掉左右margin，让它铺满整个视口
• 你可以根据实际需求调整媒体查询的断点值（比如改成600px或其他数值），适配不同的设备宽度

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