css - 仅在移动视图上隐藏 div 标签？

Question

我正在为网站创建流畅的布局。我试图在移动视图中隐藏 a<div>或整个<div>本身的内容，而不是平板电脑和桌面视图。

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

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

我将移动布局的显示设置为“无”，并在平板电脑/桌面布局上设置为块...有没有更简单的方法可以做到这一点，或者是这样吗？

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. 希望这对你有帮助！

Answer 2

将 display 属性设置none为默认值，然后在浏览器达到一定宽度时使用媒体查询将所需样式应用于 div。将768px媒体查询中的任何最小 px 值替换为您的 div 应该可见的位置。

#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%;
    }
}

Answer 3

给出的解决方案在桌面上对我不起作用，它只显示了两个 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>

Answer 4

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

这将适用于专门针对 iphone 屏幕的单一页面的响应式设计。您实际上是在路由到不同的移动页面吗？

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>

Answer 6

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

<style>
 .MobileContent {

     display: none;
	 text-align:center;

 }

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

 .MobileContent {

     display:block;

 }

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

Answer 7

好吧，我认为有比本页提到的更简单的解决方案！首先，我们举个例子：

您有 1 个 DIV 并希望在桌面上隐藏该 DIV 并在移动设备上显示（反之亦然）。因此，我们假设 DIV 位置放置在该Head部分中并命名为header_div.

您遗嘱中的全局代码CSS file是：（对于相同的 DIV）：

.header_div {
    display: none;
}

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

如此简单，无需为桌面制作 2 个 div，另一个用于移动设备。

希望这可以帮助。

谢谢你。

Answer 8

试试这个

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