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。但是，在普通视图中，两个页脚都显示在彼此之上，尽管据我所知，display：none;应该照顾好这一点。我在这里缺少什么？

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

@media (max-width: 2000px)

解决了这个问题，但我不明白为什么......而且我担心为什么我需要这样的黑客攻击。所以新问题：有谁知道为什么改变最大宽度有效？

Answer 1

您查看这两个页脚的原因是因为您查看的网站的大小超过了$screen-lg变量。

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

您需要做的是用max-width替换桌面min-width: $phone_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;
  }
}

看到这个小提琴： http://jsfiddle.net/2ckj8zzr/1/

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

1 个答案: