我正在为网站创建流畅的布局。我试图在移动视图中隐藏 <div> 或整个 <div> 本身的内容，而不是平板电脑和桌面视图。
这是我到目前为止所得到的......
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
我将移动布局的显示设置为“无”，并在平板电脑/桌面布局上设置为块...是否有更简单的方法来做到这一点，或者是这样吗？
【问题讨论】：
标签： css fluid-layout
你需要两件事。第一个是@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。所以我做了一点搜索，找到了 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>
【讨论】：
@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 个 div，一个用于桌面，另一个用于移动。
希望这会有所帮助。
谢谢。
【讨论】：
试试这个
@media handheld{
#title_message { display: none; }
}
【讨论】：