响应CSS仅在移动视图中工作，拒绝在正常视图中隐藏

我为一个页面创建了两个不同的页脚，给了它们两个不同的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)

在移动视图中，一切都很好：只显示#移动页脚，不显示#主页脚。然而，在普通视图中，两个页脚显示在另一个页脚的顶部，尽管据我所知，显示：无；我应该负责这件事。我错过了什么

更新：我不知道为什么，但出于某种原因，将@media（最大宽度：$screen lg）（即1200px btw）更改为：

---

修复了这个问题，但我不知道为什么…我担心为什么我需要这样的黑客。所以新问题是：有人知道为什么更改“最大宽度”有效吗

您看到这两个页脚的原因是您查看网站的大小大于

$screen lg

变量

如果你看一下这个提琴，你会发现当你使浏览器窗口小于

$screen lg

变量（在本例中为1000px）时，你只会看到桌面页脚。当小于

$phone\u width

变量时，您将只看到移动页脚。

您需要做的是将桌面

max width

媒体查询替换为

min width:$phone\u width

。这将在任何大于

$phone\u width

变量的屏幕上显示桌面页脚

更改：

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

  #mobile-footer {
    display: none;
  }
}

致：

看这把小提琴：

---

您确定$screen lg变量设置正确吗？结果比我预期的要复杂一些（我必须确保我们在平板电脑宽度中没有显示页脚），但使用min width确实让我走上了正确的道路。感谢您的全面回复！不客气！对于平板电脑，我建议使用范围媒体查询将页脚显示为无

@媒体（最小宽度：$phone_width）和（最大宽度：$screen lg）

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