css - 如何在媒体查询中删除显示 flex

Question

我有一个段落和一个图像并排。我用过 display:flex属性(property)。但是在小型设备中，我不想要那个属性。谁能告诉我如何删除此属性？
样式文件

p, img {
  display: flex;
}
    
img {
  float: left;
  width: 45%;
  padding: 0;
  margin: 0;
}
    
p {
  float: right;
  text-align: justify;
  width: 50%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

Answer 1

实现这一点的方法是添加以下内容:

@media only scree and (min-width: 600px){
 p, img {
  display: block;
 }
}

您应该添加一个包含元素的 flex 容器。我建议离开 display flex 并使用 flex-direction: column当媒体查询被执行时。

.flex {
  width: 100vw;
  display: flex;
  align-items: center;
}

img {
  padding: 0;
  margin: 0;
  background-color: red;
  width: 45%;
}

p {
  text-align: justify;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

@media only screen and (max-width: 600px) { 
  .flex {
    flex-direction: column;
  }
}

<div class="flex">
  <img src="https://designshack.net/wp-content/uploads/placeholder-image.png" alt="" />
  <p>Hello</p>
</div>