CSS-仅在移动视图上隐藏div标签?

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

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

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

我将移动版式的显示设置为“无”,并在平板电脑/台式机版式上将其设置为“阻止” ...有更简单的方法吗?

KoldTurkee asked 2019-11-07T19:37:52Z
7个解决方案
139 votes

您将需要两件事。 第一个是visibility: hidden;,用于在特定屏幕尺寸下激活特定代码,用于响应式设计。 第二个是#title_message属性的使用。 一旦浏览器/屏幕达到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 answered 2019-11-07T19:38:18Z
4 votes

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

#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 answered 2019-11-07T19:38:44Z
3 votes
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

这将是一个响应式设计,专门用于iPhone屏幕的单个页面。 您实际上是在路由到其他移动页面吗?

Scarecrow answered 2019-11-07T19:39:09Z
1 votes

这个例子可以指导您。 在您的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 answered 2019-11-07T19:39:40Z
1 votes

给出的解决方案在我的台式机上不起作用,它只显示了两个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>
Steve Hall answered 2019-11-07T19:40:08Z
1 votes

我只是换了个职位为我工作(仅显示移动设备)

<style>
 .MobileContent {

     display: none;
	 text-align:center;

 }

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

 .MobileContent {

     display:block;

 }

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

Carlos franco answered 2019-11-07T19:40:40Z
0 votes

试试这个

@media handheld{
    #title_message { display: none; }
}
Alejandro Ruiz Arias answered 2019-11-07T19:41:00Z
translate from https://stackoverflow.com:/questions/16550485/hide-div-tag-on-mobile-view-only