仅在移动设备上隐藏div标签？

Question

我正在为一个网站创建流动布局。 我试图在移动视图中隐藏

的内容或整个

本身，但不是在平板电脑和桌面视图中隐藏。

到目前为止，这是我得到的...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

我将移动端布局的显示设置为“none”，而在平板电脑/桌面布局中设置为“block”... 是否有更简单的方法来实现这一点，还是这就是最好的方法？

- KoldTurkee

Answer 1

你需要两样东西。第一件是使用@media screen 来在特定的屏幕尺寸下激活代码，用于响应式设计。第二个是使用visibility: hidden 属性。一旦浏览器/屏幕达到600像素，#title_message 将变为隐藏状态。

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

如果您在移动设备上使用另一个CSS，则只需将visibility: hidden;添加到#title_message。

- Matt

---

当你来到StackOverflow时......总会有一个解决方案来回答你的问题.....除了大多数情况下我似乎遇到了一些微小的替代方案。......这个答案正是我在寻找的！......谢谢你，伙计。（附注：用于我的网站http://amazewebs.com上的自定义移动菜单......当宽度<768px时，移动菜单将显示） - josh.thomson

它对我有效。必须仅显示移动页面@media screen and (min-width: 700px) { .mobile-title { visibility: hidden; } }div.mobile-title h1 { text-align: center !important; font-size: 20px; font-weight: bold; padding: 5px; } - gnganapath

Answer 2

之前给出的解决方案在我的桌面电脑上无效，它仍然显示了两个div，但我的手机只显示了移动div。因此，我进行了一些搜索并找到了min-width选项。我更新了我的代码如下，现在它可以正常工作:)

CSS：

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

- Steve Hall

Answer 3

将默认情况下的显示属性设置为none，然后使用媒体查询，在浏览器达到特定宽度时将所需的样式应用于

。在媒体查询中将768px替换为您的

可见的最小px值即可。

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}

- Phil Sinatra

---

当然它们是解决方案，但你正在错误的方式进行操作。除非您的网站主要用于移动设备，否则不应该从底层开始构建CSS。 - MMM

我认为移动端和桌面端不应该视为两个不同的网站。当浏览器屏幕变大时，扩展项目要容易得多，而缩小项目则要困难得多。在这种情况下，KT正在构建响应式网站，无论它是“主要”用于移动设备还是优化所有浏览器使用。移动设备优先的方法可以避免移动浏览器加载永远不会实际应用的额外CSS样式。这种方法并非“错误的方式”，只是不是您建议构建CSS的方式。 - Phil Sinatra

@MMM 这实际上就是移动优先设计的方式：从底部开始。 - SepehrM

@SepehrM 看看我的第一条评论，注意那是3年前，当时我们仍然需要担心不支持媒体查询的浏览器。 - MMM

@MMM 哎呀，我以为现在是2015年。不管怎样，我反对“你永远不要从底层开始构建你的CSS”。 - SepehrM

Answer 4

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

这是为iPhone屏幕设计的响应式页面，您实际上会将路由器路由到不同的移动页面吗？

- Scarecrow

---

那没有奏效。它抹掉了移动布局的所有CSS。 - KoldTurkee

你能提供一小部分你的CSS代码吗？我在这里看不到整个情况，但这不应该会清除你的布局。 - Scarecrow

这样做更好，因为visibility: hidden只隐藏元素但仍然存在（位置保留）。相反，display: none; 真正地隐藏它并完全移除它。 - Angel

Answer 5

您可以参考以下示例。在您的 CSS 文件中：

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

在你的HTML文件中：

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

- J.C. Gras

Answer 6

我认为这个页面上提到的解决方案比较简单！首先，让我们举个例子：

你有一个 DIV 元素，想要在桌面端隐藏它，在移动端显示它（或者反过来）。所以，我们假设这个 DIV 的位置在 Head 部分，并命名为 header_div。

在你的 CSS 文件 中，全局代码将是：（针对同一个 DIV）：

.header_div {
    display: none;
}

@media all and (max-width: 768px){
.header_div {
    display: block;
}
}

如此简单，无需创建两个 div，一个用于桌面，另一个用于移动设备。

希望这能有所帮助。

谢谢。

- Jodyshop

---

没像这样工作 - eqrakhattak

Answer 7

我刚刚换了工作位置，并为我工作（仅显示移动设备）。

<style>
 .MobileContent {

     display: none;
  text-align:center;

 }

@media screen and (max-width: 768px) {

 .MobileContent {

     display:block;

 }

}
</style>
<div class="MobileContent"> Something </div>

- Carlos franco

Answer 8

试一下这个

@media handheld{
    #title_message { display: none; }
}

- Alejandro Ruiz Arias