即使未设置，网站也有宽度限制

Question

我已经完成了我的主页并希望它具有响应性，我希望内容占据整个页面宽度，但宽度有某种限制，所以当我想让文本变大时，它只会在一定宽度处中断（例如，请参见屏幕截图）。

这是一个例子：

@media (max-width: 480px) {
    body {
        background: #000000 !important;
    }

.container {
    h1 {
        font-size: 3rem;
}

h1 原本是 2em，但当它变大（3em）时，文本会因为宽度限制而中断，并且不会在宽度上自行扩展。

为什么内容不以调整大小为中心？因为内容有display:flex、align-items:center和justify-content:center。

这是我的完整代码的代码笔： https://codepen.io/shard77-the-bold/pen/gOjMMxK

Answer 1

.conatiner 类正在运行，内容居中对齐，但h1 和h1 中的文本全宽。 仅供参考，仅当子元素与 flex 容器的宽度不同时，flex box 才会显示效果

在上面的示例中，我猜 flex 容器按预期工作，因为当 .intro 宽度小于 .container 时，flex-box 会显示其效果。

class .intro 与 .container class 的宽度相同，因此它们不会居中对齐。

您应该使用 text-align: center 将文本内容居中对齐以适应您想要的屏幕尺寸。