如何使图像标题不显示在移动设备上

Question

我的页面上有一个标题，其中包含一个文本块，旁边有一个图像，位于单独的“列”中，如下图所示：

当我在移动设备上时，如何隐藏标题的图像（黑色部分）？我的CSS会是什么样的？

Answer 1

您可以使用如下所示的媒体查询：

 @media screen and (max-device-width: 480px) { 
   .black_part {
      display:none;
   } 
 }

此处假设移动设备的最大宽度为480px。

Answer 2

试试这个： -

/* iPhone (Portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 479px){
 .the_black_part{ display:none;}
}

/* iPhone (Landscape) ----------- */
@media screen and (min-width: 480px) and (max-width: 767px){
 .the_black_part{ display:none;}    
}

/* iPad (Potrait) ----------- */
@media only screen and (min-width: 768px) and (max-width: 959px){
 .the_black_part{ display:none;}    
}