你需要做两件事。第一件事是@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。

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

这个解决方案在桌面上不适用，它只显示了两个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;}
}

超文本：

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

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

这将是一个响应式的设计，专门为iPhone屏幕设计一个单一的页面。你实际上是在路由到不同的移动的页面吗？

你可以参考这个例子。在你的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>

我只是换了位置，为我工作（只显示移动的）

<style>
 .MobileContent {

     display: none;
	 text-align:center;

 }

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

 .MobileContent {

     display:block;

 }

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

那么，我认为有比这里提到的简单的解决方案在这个页面上！首先，让我们举个例子：
您有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个部门的一个桌面和其他移动的。
希望这个有用。
谢谢你。

试试这个

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