响应式 CSS 仅在移动视图中工作，拒绝在普通视图中隐藏

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)

在移动视图中一切正常：只有#mobile-footer 出现而#main-footer 不显示。但是，在普通视图中，两个页脚都显示在彼此之上，但据我所知，显示：none;应该照顾那个。我在这里错过了什么？

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

@media (max-width: 2000px)

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

Answer 1

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

如果你看一下这个 fiddle，你会发现当你使浏览器 window 小于 $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/

响应式 CSS 仅在移动视图中工作，拒绝在普通视图中隐藏

Responsive CSS only working in mobile view, refusing to hide in normal view

css

mobile

responsive-design

haml