如何使用 css 取消项目

Question

我正在尝试使网站响应，当它缩小时，我想取消图像。我的所有图像都是HTML格式，我试图使它们在屏幕缩小时不显示。

Answer 1

为此，您可以使用媒体查询。

例：

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

当屏幕尺寸(宽度(小于 768px 时，这将不显示图像。

您可以在此处了解有关媒体查询的更多信息。

Answer 2

CSS 媒体查询用于此目的

@media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}

在(max-width: 600px)中，您将样式停止工作的最大屏幕宽度 - 或者更确切地说 - 应用这些样式所需的最小值

下面是更详细的教程：W3Schools.com - 媒体查询