html - 在小屏幕上让 div 消失？

Question

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

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

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

在我的 HTML 文件中，我有

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

在小屏幕上时，我希望这个图像 div 消失，因为我希望小屏幕(例如手机)上的人只关注文本。

为此，我将以下 block 添加到 style-xsmall.css

.image img {
    width: 0;
}

但它不起作用。

如何让这个图像 div 在小屏幕上消失？

Answer 1

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

在这个例子中，所有以“image”作为类名的东西都会在小于 300px 的屏幕上消失，你可以根据你的情况进行调整，这只是一个例子，你可以设置另一个屏幕尺寸和 css 选择器