css - 使用媒体查询隐藏移动设备上的内容

Question

在我的主页上，我想在台式机/笔记本电脑上显示主页上包含的所有内容，但在移动设备上，我只想显示类为“bg-header”的第一个 div。我不想在手机上看到“shoulddisappear”。

扩展布局

block content_header
  div.container-fluid.col-sm-12.bg-header
    div.tagline
      h2.top
        | <b> HARD </b>
      h2.bottom
        | Lorem impsum.
      center
        if !user
          a.signup-button-home.btn.btn-primary.opacity(href='/1234') Order
        else
          a.signup-button-home.btn.btn-primary.opacity(href='/123') Order



  div.container-fluid
    div.sub-content-container.row.shoulddisappear
      div
        h3(style='padding-top: 30px;padding-bottom: 30px;') How IT Works
        div.col-sm-2
        div.col-sm-8
            div.row.circles.relative
              div.connector.absolute
                div.content.relative
              div.col-sm-4.how-works
                center
                  div.circle
                    p 1
                h3 Requests 
                center
                  h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

              div.col-sm-4.how-works
                center
                  div.circle
                    p 2
                h3  Order
                center
                  h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

              div.col-sm-4.how-works
                center
                  div.circle
                    p 3
                h3 Here
                center
                  h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        div.col-sm-2

我正在考虑对此使用媒体查询，并且我在 CSS 中实现了它们，如下所示:

//Media Queries
@media only screen and (max-width : 320px) {
  #bg-header{
    background-color: #fff;
    background-image: none; 
    margin-left: 0px;
    margin-right: 0px;

    .tagline{
      h2{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .top{
        font-family: open_sansregular;
        font-weight: bold;
        margin-top: 200px;
        color: #fff;
        font-size: 48px;
        padding-bottom: 1px;
        letter-spacing: 1px;
      }

      .bottom{
        margin-top: 0px;
        //-margin-bottom: -40px;
        font-size: 10px;
      }
      a{
        margin-top: 0px;
      }
    }  
  }

这是行不通的。所以我想知道如何使用媒体查询在移动设备上隐藏特定内容？

Answer 1

看这里:http://codepen.io/anon/pen/QbNJoY

我使用 boostrap 实用程序类隐藏 xs 和 sm 设备上的元素(<768px 宽度使用标准配置)http://getbootstrap.com/css/#responsive-utilities