css - 响应式 CSS 仅在移动 View 中工作，拒绝在普通 View 中隐藏

Question

我为一个页面创建了两个不同的页脚，为它们指定了两个不同的 ID，然后编写 CSS 以便在常规浏览时隐藏一个页脚，在移动浏览时显示另一个页脚。你知道该怎么做。

@media (max-width: $screen-lg) {
  #main-footer {
    display: block;
  }

  #mobile-footer {
    display: none;
  }
}

@media (max-width: $phone_width) {
  #main-footer {
    display: none;
  }

  #mobile-footer {
    display: block;

    // I believe all the CSS below is irrelevant, but posted for completeness 
    max-width: 550px;
    .content {
      max-width: 550px;
      padding-top: 15px;
      padding-bottom: 15px;
      width: inherit;
    }
    .content .left {
      max-width: 550px;
      float: none;
      text-align: center;
      ul {
        text-align: center;
        padding: 0;
        li img {
          margin-left: 5px;
        }
      }
    }
    .content .right {
      max-width: 550px;
      float: none;
      text-align: center;
    }
    .content .right .links {
      text-align: center;
      ul {
        text-align: center;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 10px;
        li {
        margin-left: 5px;
        }
      }
    }
    .content .right .copyright {
      display: block;
      text-align: center;
      margin-bottom: 20px;
    }
  }
}

这是 HAML 的样子:

- hide_groove ||= false
- hide_inquiry ||= false
- skip_javascript ||= false

%footer{class: ("signed_in" if user_signed_in?), id: "main-footer"}

  - unless user_signed_in?
    %div{style: 'display: none'}
      = render 'shared/stuff_sign_up_form'

  .content

    .row.sign_up_and_location

      .left
        = render 'shared/like_on_facebook', size: '', dimension: 38, float: 'left', spacing: '5px'

      .right

        .links{style: 'clear: right;'}
          %ul
            %li= link_to 'About', main_app.about_path
            %li= link_to 'Submit a Stuff', main_app.submit_a_stuff_path
            %li= link_to 'Advertise', main_app.advertise_path
            %li= link_to 'Jobs', main_app.jobs_path
            %li= link_to 'FAQ', main_app.faq_path
            %li= link_to 'Contact', main_app.contact_path
            %li= link_to 'Terms', main_app.terms_path
            %li= link_to 'Privacy', main_app.privacy_path
          .copyright 
            (copyright stuff)

  = render 'shared/stuff_submission_prompt' if @show_stuff_submission_prompt
  = render 'shared/stuff_submission_prompt' if @show_stuff_submission_prompt


%footer{id: "mobile-footer"}
  .content

    .left
      %ul
        %li
          = link_to 'https://www.facebook.com/StuffHQ', target: "_blank" do
            = image_tag asset_path("social/social-media-icons-facebook-v1.png")
        %li
          = link_to 'http://www.pinterest.com/stuff', target: "_blank" do
            = image_tag asset_path("social/social-media-icons-pinterest-v1.png")
        %li
          = link_to 'https://twitter.com/stuff', target: "_blank" do
            = image_tag asset_path("social/social-media-icons-twitter-v1.png")
        %li
          = link_to 'https://plus.google.com/+Stuff', target: "_blank" do
            = image_tag asset_path("social/social-media-icons-google-plus-v1.png")
        %li
          = link_to 'http://instagram.com/stuff', target: "_blank" do
            = image_tag asset_path("social/social-media-icons-instagram-v1.png")

    .right
      .links
        %ul
          %li= link_to 'About', main_app.about_path
          %li= link_to 'Contact', main_app.contact_path
          %li= link_to 'Advertise', main_app.advertise_path
          %li= link_to 'Jobs', main_app.jobs_path
          %li= link_to 'FAQ', main_app.faq_path
          %li= link_to 'Terms', main_app.terms_path
          %li= link_to 'Privacy', main_app.privacy_path
      .copyright
       (copyright stuff)

在移动 View 中一切正常:只有#mobile-footer 出现而#main-footer 不显示。但是，在普通 View 中，两个页脚都显示在彼此之上，但据我所知，显示:无；应该照顾那个。我在这里缺少什么？

更新:我不知道为什么，但出于某种原因将 @media (max-width: $screen-lg) (顺便说一句，这是 1200px)更改为:

@media (max-width: 2000px)

解决了这个问题，但我不知道为什么...而且我很担心为什么我需要这样的 hack。如此新的问题:有人知道为什么更改最大宽度有效吗？

Answer 1

您看到两个页脚的原因是您查看网站的尺寸大于您的 $screen-lg 变量。

如果您看一下这个 fiddle ，您会发现当您使浏览器窗口小于 $screen-lg 变量(在本例中为 1000px)时，您会看到仅限桌面页脚。当您变得小于 $phone_width 变量时，您将只能看到移动页脚。 http://jsfiddle.net/2ckj8zzr/

您需要做的是用 min-width: $phone_width 替换您的桌面 max-width 媒体查询。这将在任何大于 $phone_width 变量的屏幕尺寸上显示桌面页脚。

改变:

@media (max-width: $screen-lg) {
  #main-footer {
    display: block;
  }

  #mobile-footer {
    display: none;
  }
}

到:

@media (min-width: $phone_width) {
  #main-footer {
    display: block;
  }

  #mobile-footer {
    display: none;
  }
}

请看这个 fiddle : http://jsfiddle.net/2ckj8zzr/1/