< 600px

Question

我制作了一个有 2 栏的网站。 左栏包含图片 (30%)，右栏包含文本 (70%)。 一切正常，但在分辨率低于 600 像素的屏幕上，左栏看起来很难看。 当屏幕尺寸低于 600px 时，我想保留左栏（不相互堆叠）。 我该怎么做？

css:
body {
    background-image: url(images/starsonblackredbg.jpg);
    }

.flex-container {
  display: flex;
  text-align: left;
}

.flex-item-left {
  flex: 20%;
    justify-content: center;
}

.flex-item-right {
  flex: 80%;
    justify-content: left;
  padding: 10px;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other*/ 
@media screen and (max-width: 600px)
{
    .flex-item-left .flex-item-right {
        width: 100%;
        padding: 0;
    }
}
HTML
<div class="row">
<div class="flex-container">
  <div class="flex-item-left"><img src="images/starswithpartialmask.jpg" class="img-left"></div>
  <div class="flex-item-right">
</h2><h4><u>Your Gateway to Exquisite Asian Products!</u></h4>
</div>
</div>

Answer 1

左列使用display:none隐藏，右列使用flex:100%占据全宽 这样，当屏幕尺寸小于 600px 时，左列将被隐藏，右列将占据容器的整个宽度，从而为较小的屏幕带来更干净、更人性化的布局。

body {
  background-image: url(images/starsonblackredbg.jpg);
}

.flex-container {
  display: flex;
  text-align: left;
}

.flex-item-left {
  flex: 30%;
  justify-content: center;
}

.flex-item-right {
  flex: 70%;
  padding: 10px;
}

/* Responsive layout - when the screen is less than 600px wide, hide the left column */
@media screen and (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }

  .flex-item-left {
    display: none;
  }

  .flex-item-right {
    flex: 100%;
  }
}