如何删除媒体查询中的显示弹性

Question

我有一个段落和一个图像并排。display:flex我为此使用了财产。但在小型设备中，我不想要这个属性。谁能告诉我如何删除该属性？

样式.css

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 not|only mediatype and (expressions) {
  /* your css rules */
}

您可以通过将小于特定宽度的屏幕设置为默认值来从 CSS 规则中排除它们，

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;
}

@media only screen and (max-width: 768px) {
  p {
    display: block;
  }
  img {
    display: inline-block;
  }

}

或者您可以编写规则，使其仅适用于大于特定宽度的屏幕：

@media only screen and (min-width: 768px) {
  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;
}

此参考应该对媒体查询有所帮助： https://www.w3schools.com/css/css3_mediaqueries.asp

还有一个关于将显示属性设置为默认值的各种方法的好资源，可以在这里找到： 将 CSS 显示属性重置为默认值