如何使用 CSS 根据屏幕大小动态调整文本容器宽度？

在设计响应式网页时，我们可能需要根据屏幕大小动态调整文本容器的宽度，以保证在不同设备上都能良好地展示。下面是使用 CSS 进行调整的方法：

使用百分比

可以使用百分比作为文本容器的宽度值，这样可以根据屏幕大小自动调整。例如：

.container {
  width: 90%;
}

这将使得文本容器的宽度为父元素宽度的 90%。当父元素宽度变化时，文本容器的宽度也会相应变化，从而实现动态调整。

使用媒体查询

如果需要在特定的屏幕大小下使用不同的宽度值，可以使用媒体查询。例如，我们希望在屏幕宽度小于 768px 时，文本容器的宽度为 100%；在大于等于 768px 时，文本容器宽度为 50%。可以这样实现：

.container {
  width: 50%;
}

@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

这样，当屏幕宽度小于 768px 时，媒体查询会覆盖前面的样式，并将文本容器的宽度设为 100%。

使用 flexbox

使用 flexbox 可以更方便地进行文本容器宽度的动态调整。我们可以将文本容器的父元素设为 flex 容器，然后使用 flex-grow 属性来控制文本容器的宽度。例如：

.container {
  display: flex;
}

.text {
  flex-grow: 1;
}

这样，文本容器会自动占据剩余空间，并根据屏幕大小自动调整宽度。

以上是使用 CSS 根据屏幕大小动态调整文本容器宽度的三种方法。可以根据具体情况选择适合自己的方法。