图像可见在响应手机/平板电脑，但隐藏在桌面上

Question

我有一个流体网格网站，我设计使用DW CS6。我正在尝试将点击呼叫图片和点击文字图片放到我只想在移动设备上运行的图片上。我知道可以将图像和文本隐藏在某些尺寸的设备上，但我不够了解如何。我试图在我的CSS底部添加屏幕大小限制，但这也不起作用。我确实有代码用于从移动设备发送文本或拨打电话。 :)

我会创建一个div class id =“mobile”吗？我将不胜感激任何可能的方向。我有DW CS6中流体网格模板标准的媒体查询。

HTML

<a href="tel:[phone]"><img src="images/callme.jpg" width="100" height="100" alt="click to call"></a> 
<a href="sms:2513676152"><img src="images/textme.jpg" width="100" height="100" a;t="click to text"></a> 

CSS

/* 
    Dreamweaver Fluid Grid Properties 
    ---------------------------------- 
    dw-num-cols-mobile:  5; 
    dw-num-cols-tablet:  8; 
    dw-num-cols-desktop: 10; 
    dw-gutter-percentage: 25; 



/* Mobile Layout: 480px and below. */ 
.gridContainer { 
    margin-left:auto; 
    margin-right:auto; 
    width:87.36%; 
    padding-left:1.82%; 
    padding-right:1.82%; 
} 

#LayoutDiv1 { 
    clear:both; 
    float:left; 
    margin-left:0; 
    width:100%; 
    display:block; 
} 

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ 
@media only screen and (min-width: 481px) { 
.gridContainer { 
    width:90.675%; 
    padding-left:1.1625%; 
    padding-right:1.1625%; 
} 

#LayoutDiv1 { 
    clear:both; 
    float:left; 
    margin-left:0; 
    width:100%; 
    display:block; 
} 
} 

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ 
@media only screen and (min-width: 769px) { 
.gridContainer { 
    width:88.2%; 
    max-width:1232px; 
    padding-left:0.9%; 
    padding-right:0.9%; 
    margin:auto; 
} 

#LayoutDiv1 { 
    clear:both; 
    float:left; 
    margin-left:0; 
    width:100%; 
    display:block; 
} 
} 

Answer 1

你需要媒体查询添加到您的CSS能够做到这一点

/* DESKTOP CODE HERE */ 

@media screen and (max-device-width: 800px) { 
    /* MOBILE CODE HERE */ 
} 

Answer 2

你的代码中，你只要你有不同媒体查询。最后一个是桌面。当屏幕宽度超过768像素时，此媒体查询正用于某些样式。因此，在此查询中，您可以使用“display：none”或“visibility：hidden”（取决于您希望达到的效果）而不显示图像。

例子：

@media only screen and (min-width: 769px) { 
    .yourimgclass{display:none; (or) visibility:hidden;} 
}