Question

我正在为网站创建流畅的布局。我想在移动视图中隐藏<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

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

这将是一个响应式设计，专门用于iphone屏幕的单页。您实际上是否路由到其他移动页面？

Answer 3

将display属性设置为none作为默认值，然后使用媒体查询在浏览器达到特定宽度时将所需样式应用于div。将媒体查询中的768px替换为div应该可见的最小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%;
    }
}

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。所以我做了一点搜索并找到了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 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; }
}

Answer 8

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

您有1个DIV，并且想要在桌面上隐藏Thas DIV并在Mobile上显示（反之亦然）。因此，我们假设DIV位置位于Head部分中，并命名为header_div。

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

.header_div {
    display: none;
}

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

如此简单，无需为台式机设置2 div，而为移动设备设置2 div。

希望这会有所帮助。

谢谢。

仅在移动视图中隐藏div标签？

8 个答案: