css小屏幕情况下左右变上下

CSS 在网页排版时非常重要，它不仅可以美化网页，还可以让网页更好地适应各种不同的屏幕大小。其中一种情况是，当网页在小屏幕设备如手机上显示时，左右排列的布局会变成上下排列。

这种布局变化可以使用 CSS 中的媒体查询来实现。媒体查询是一种针对不同设备屏幕的 CSS 样式设置，它可以根据屏幕的尺寸、方向和分辨率等属性来设置不同的样式。

/* 当屏幕宽度小于等于 600px 时，将左右布局变成上下布局 */
@media screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .left,.right {
    width: 100%;
    margin: 0;
  }
}

在上面的代码中，我们首先使用媒体查询子句来指定只在小于等于 600px 的屏幕上应用这些 CSS 样式。然后，我们将容器设置为使用 flexBox 布局，并将其 flex-direction 属性设置为 column。这将使得容器内的元素在垂直方向上排列。

接着，我们将左右两个元素的宽度设置为 100%，并将其 margin 设置为 0。这样做是因为默认情况下，元素之间会有一些间隔，但在上下布局时我们不需要这些间隔。

最后，我们应该在设计网页时尽可能保证在不同屏幕大小下能够呈现良好的效果。因为当我们使用媒体查询来适应小屏幕时，实际上是在覆盖原有的样式，而不是添加新的样式。