使div在小屏幕上消失吗？

Question

我的网站有一个整体CSS文件，以及许多继承的CSS文件，适用于不同的屏幕尺寸。

在整个CSS文件 style.css 中，我有

.image img {
    border-radius: 5px;
    display: block;
}

在我的HTML文件中，

<div class="image">
   <img src="me.jpg"/>
</div>

在小屏幕上时，我希望此图像div消失，因为我希望小屏幕上的人们（例如电话）仅关注文字。

为此，我在style-xsmall.css

中添加了以下代码块

.image img {
    width: 0;
}

但是它不起作用。

在小屏幕上，如何使此图像div消失？

Answer 1

@media only screen and (max-width: 300px) {
  .image {
    display: none;
  }
}

在此示例中，所有具有“图像”作为类名的内容都将在小于300px的屏幕上消失，您可以根据情况进行调整，这只是一个示例，您可以设置其他屏幕尺寸和CSS选择器

Answer 2

如果需要解决此问题，请使用媒体查询。媒体查询会根据用户使用的屏幕的绝对宽度来更改不同的标签和大小。