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 */
}

Answer 2

在您提供的代码中，您有不同的媒体查询。最后一个用于桌面。当屏幕宽度超过768像素时，此媒体查询将用于某些样式。因此，在此查询中，您将使用“display：none”或“visibility：hidden”（取决于您希望实现的效果）来显示图像。

示例：

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

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

2 个答案: