Question

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

扩展布局

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

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

1 个答案: