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

Question

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

我会创建一个 div class 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 */
}