CSS：当屏幕缩放到某个值以下时删除图像

Question

我正在使用响应式网格系统构建响应式布局。一旦屏幕缩放到480px以下，我的所有元素都会堆叠在顶部并占据页面宽度的100％。这非常适合移动设备。然而，图像似乎阻碍了我想在屏幕缩放到此值以下时将其删除。

我正在使用@media功能。感谢您的提示

Answer 1

你可以使用display：none; css中的属性。

示例：

#id_of_image {
    display:none;
}

在@media中使用它。

Answer 2

出了什么问题：

@media (max-width: 480px) {
   img {  //or some specific element
       display: none;
   }
}

Answer 3

如果你使用CSS，你还在下载图像，如果你能避免它，那就没有必要。您最好在服务器上检查设备，如果它是移动设备，则只是从页面中省略标签。您可以使用Mobile Detect库，然后您的代码看起来像

<?php if($device != 'mobile'): ?>
    <img src="">
<?php endif; ?>

http://mobiledetect.net

当然，您可以在CSS中使用display:none作为后备......：）