在手机和平板电脑上隐藏页脚

Question

我想在手机和平板设备上隐藏我的页脚。我在谷歌上到处寻找帮助，但没有找到任何东西。我的页脚的 HTML 代码是，

<!-- Footer -->
    <footer class="footer" role="contentinfo">
        <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
            <jdoc:include type="modules" name="footer" style="none" />
          <div class="footer">
&copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
            </div>

我的页脚的 CSS 代码是，

.footer {
  background-color: #F6861F;
  color: #fff;
  padding: 20px 0;
  margin-bottom: 0
  text-align: center;
  overflow: hidden;
  width: 100%;
}

Answer 1

在移动优先策略之后，您应该首先隐藏页脚，然后仅在桌面上显示它。

.footer {
  display: none;
}

@media (min-width: 992px) {
  .footer {
    display: block;
    background-color: #F6861F;
    color: #fff;
    padding: 20px 0;
    margin-bottom: 0
    text-align: center;
    overflow: hidden;
    width: 100%;
  }
}

Answer 2

这样的事情应该有效：

@media screen and (max-width: 600px) {
  .footer{
    visibility: hidden;
    display: none;
  }
}

Answer 3

检查这个 jsfiddle http://jsfiddle.net/ks1q8nkt/

@media screen and (max-width: 600px) {
  .footer{
    display: none;
  }
}

代码意味着块中定义的每个类、id 和元素将响应最大宽度为 600 像素的所有设备。

Answer 4

你必须在 css 中为你的移动宽度写@media。

@media screen and (max-width: 360px) {
 .footer{
     visibility: hidden;
     display: none;
 }
}

适用于小型手机，您可以根据自己的宽度更改宽度。

Answer 5

使用其他人的 CSS。或者，如果您使用的是 Bootstrap 框架（融入大多数 Joomla 模板），只需添加适当的列可见性类：

<!-- Footer -->
<footer class="footer" role="contentinfo">
    <div class="hidden-xs hidden-sm container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
        <jdoc:include type="modules" name="footer" style="none" />
        <div class="footer">
            &copy; <?php echo date('Y'); ?> <?php echo $sitename; ?>
        </div>
    </div>
</footer>

我在容器前面的div类列表中添加了hidden-xs和

hidden-sm

。参见此处：Bootstrap 响应实用程序

注意：这两个类适用于最新版本的 Bootstrap。对于 2.3.2 版本，您需要阅读此处：Bootstrap v2.3.2 Responsive Utilities

Answer 6

你应该试试这个 css 代码。

@media only screen and (max-width:767px)
{
.footer{
display: none;
}
}