我已经完成了我的主页，并希望它是响应，我希望的内容需要整个页面的宽度，但宽度不知何故有一个限制，所以当我想使文本更大，它只会打破在一定的宽度（见截图为例）。
下面是一个例子：
@media (max-width: 480px) {
body {
background: #000000 !important;
}
.container {
h1 {
font-size: 3rem;
}h1最初是2em，但当使它更大（3em）时，文本会因为宽度限制而断裂，不会在宽度上扩展自己。
为什么内容不以调整大小为中心？因为内容有display:flex与align-items:center和justify-content:center。
下面是我的完整代码：
x一个一个一个一个x一个一个二个x
1条答案
按热度按时间68bkxrlz1#
.conatiner类正在工作，内容居中对齐，但h1和h1以下的文本采用全宽。仅供参考，只有子元素与flex容器的宽度不同时，flex框才会显示效果在上面的示例中，我猜flex容器按预期工作，因为当
.intro宽度小于.container时，flex-box会显示其效果。类
.intro与类.container具有相同的宽度，因此它们未在中心对齐。你应该使用
text-align: center来为你想要的屏幕尺寸居中对齐文本内容。