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

时间:2015-05-14 21:01:58

标签: css media-queries

在我的主页上,我希望在台式机/笔记本电脑上显示我主页上包含的所有内容,然后在移动设备上显示我想只显示第一个div和#34; bg-header"。 我不想看到"应该消失"在移动设备上。

扩展布局

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

这不起作用。所以我想知道如何使用媒体查询隐藏移动设备上的特定内容?

1 个答案:

答案 0 :(得分:1)

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

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