在移动设备和平板电脑上隐藏页脚

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

- Endô Fujimoto

---

我不确定你在谷歌上为何找不到这个信息。它可以毫无节制地获取;-) 尝试搜索“CSS在移动设备上隐藏”。 - Mike Furlender

谢谢Mike，我会看一下。 - Endô Fujimoto

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

- Alex

Answer 2

你应该尝试这段CSS代码。

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

- TechsBucket

Answer 3

类似这样的代码应该可以运行：

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

- Mike Furlender

---

@media screen and (max-width: 80px) { .hidden_mobile { visibility: hidden; display: none; } } - Endô Fujimoto

尝试使用了这个，但仍然没有任何作用。已经阅读了一些在线教程，不知道我做错了什么。你能给我一些建议吗？ - Endô Fujimoto

Answer 4

请查看此jsfiddle http://jsfiddle.net/ks1q8nkt/

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

这段代码的意思是，定义在该块中的每个类、ID和元素都将响应最大宽度为600像素的所有设备。

- pregunta

Answer 5

你需要在CSS中为移动设备的宽度编写@media。

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

对于小型移动设备，您可以根据自己的需要更改宽度。

- sonam gupta

Answer 6

使用其他人的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响应式实用工具。

- Rodney