如何用css取消一个项目

Question

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

Answer 1

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

示例：

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

当屏幕尺寸（宽度）小于768px时，不会显示图像。

您可以详细了解媒体查询here。

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 - Media Queries