Question

我正在开始使用我的桌面版网站并将其缩小为移动设备。该网站非常静态，因此这个过程不应该花费很长时间。我不习惯缩小到移动，所以我有点学习曲线，并寻求一些帮助。我的菜单就位于移动菜单显示的位置，当屏幕尺寸缩小时，桌面菜单会隐藏：

@media (min-width: 220px) and (max-width: 568px) {
#menu ul, #logo, #header{
  display: none;
}

反之亦然适用于桌面到位并且隐藏了移动导航：

@media (min-width: 569px) {
.navbar{
  display: none;
   }
}

然而，当我调整我的CSS来改变我的移动视图时，我的第一次磨合只是显示我的内容（在这种情况下我的'about'内容）以适应屏幕。我在台式机中的流动性并不理想，但它可以在平板电脑及其他所有显示器上运行。我对“关于”页面进行了简单的处理，只是为了解决问题而显示我的文本和水平中断，但文本仍然遵循CSS为桌面版设置的规则。以下是适用于移动设备的@media规则：

@media (min-width: 220px) and (max-width: 568px) {
#menu ul, #logo, #header{
  display: none;
}
  .about_text{
    width: 100%;
  }

.about_text h2{
  font-size: 3em;
  padding-bottom: 1%;
}
.breaker-about{
  clear: both;
  border-bottom: 3px solid #cccccc;
  margin: 5px 0px 12px 0px;
  width: 90%;
}

}

@media (min-width: 569px) {
.navbar{
  display: none;
   }
}

我是否需要从这里开始在@media（min-width：569px）媒体查询中包含整个CSS？或者这是一个单独的'if / then'规则吗？

这是我的小提琴。使用bootstrap进行顶级导航，这就是为什么调整大小不会在小提琴上设置样式。

https://jsfiddle.net/qu4851wq/1/

Answer 1

您不需要移动版(min-width: 220px)，只需(max-width: 568)即可。如果您正在使用Bootstrap，您可以将整个内容放入网格中，它将自动扩展为移动设备。

<div class="container">
  <div class="row">
    <div class="col-md-12">
    <!-- All your content after the nav -->
    </div>
  </div>
</div>

您不必将整个CSS放在min-width中，用于网站的非移动部分。

Answer 2

或者你可以使用bootstrap默认导航并按照你想要的样式设置它。

bootstrap nav

移动调整大小问题与所有元素

2 个答案: