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

我有一个流体网格网站，我设计使用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; 
} 
}

来源

2014-10-27 KrissieC

什么是你正在使用当前媒体查询？ – 2014-10-27 22:47:21

所以你的问题是，如何在手机上隐藏图像？或者如何让它们在您的计算机上可见？ – 2014-10-27 22:51:21

我想只在桌面上隐藏它们。现在，手机和桌面上都可以看到点击通话和点击文本按钮。 – KrissieC 2014-10-27 23:19:54

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

/* DESKTOP CODE HERE */ 

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

来源

2014-10-27 22:53:33

谢谢戴安娜。可悲的是，我只知道DW的模板附带的媒体查询。你知道我在哪里可以找到信息，以了解如何使用媒体查询进行可见/隐藏？ – KrissieC 2014-10-27 23:50:12

如果您将'display：none;'添加到您不希望在桌面上显示的类或标识，则可以执行此操作。例如，在媒体屏幕外查询：img {display：none;}这将禁用桌面上的所有图像，现在将其创建到您不希望出现在桌面上的类 – 2014-10-28 00:00:18

很高兴我可以帮助@KrissieC :)如果您有有些时候投票或标记我的答案是正确的，非常感谢 – 2014-10-28 00:14:48

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

例子：

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

来源

2014-10-27 23:53:34

谢谢大家。我在HTML中创建了一个div class =“mobile”，并向CSS添加了.mobile {display：none;}，并且所有工作都正常。非常感谢你们的指导。 – KrissieC 2014-10-28 00:01:54

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

回答

相关问题