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

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

将 display 属性设置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

给出的解决方案在桌面上对我不起作用，它只显示两个 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 4

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

这将适用于响应式设计，专门针对 iPhone 屏幕使用单页。您实际上是否路由到了不同的移动页面？