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

Question

我有一个使用 DW CS6 设计的流体网格网站。我正在尝试单击以调用图像和单击以仅在移动设备上运行的文本图像。我知道可以在某些尺寸的设备上隐藏图像和文本，但我知识渊博，无法理解。我试图在我的 CSS 底部添加屏幕尺寸限制，但这也不起作用。我确实有代码可以从移动设备发短信或打电话。 :)

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

HTML

<a href="tel:2513676152"><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;}
}