隐藏仅移动视图div标签？(hide div tag on mobile view only?)

我创建了一个网站的流体布局。 我试图隐藏的内容<div>或全部<div>本身在移动视图，而不是平板电脑和桌面视图。

这里就是我这么远...

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

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

Answer 1:

您将需要两件事情。 首先是@media screen以激活在一定的屏幕尺寸的特定代码，用于响应式设计。 第二是使用的visibility: hidden属性。 一旦浏览器/屏幕达到600pixels然后#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:

在显示属性设置为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:

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

这将是一个敏感的设计，为iPhone屏幕特别是单页。 你居然路由到不同的移动网页？

Answer 4:

你可以通过这个例子来引导。 在你的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 5:

给我的桌面上没有工作的解决方案，它只是表明双方的div，虽然移动仅表现为移动DIV。 所以我做了一点搜索，发现最小宽度选项。 我在我的代码更新到下面的，现在工作得很好:)

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 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:

试试这个

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

文章来源: hide div tag on mobile view only?