所有元素的移动调整大小问题答案

【问题标题】：Mobile resizing issue with all elements所有元素的移动调整大小问题
【发布时间】：2015-10-12 20:54:25
【问题描述】：

我正在努力将我的桌面网站缩小到移动设备。该站点非常静态，因此该过程不会花费很长时间。虽然我不习惯缩小到移动设备，所以我有点学习曲线，正在寻求一些帮助。我的菜单位于移动菜单显示的位置，而桌面菜单在屏幕缩小时隐藏：

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

当桌面就位并隐藏移动导航时，反之亦然：

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

但是，当我调整我的 CSS 以改变我的移动视图时，我的第一次运行只是简单地显示我的内容（在本例中是我的“关于”内容）以适应屏幕。我在桌面上的流畅性并不理想，但它可以在平板电脑及其他设备的所有显示器上按需运行。我对“关于”页面进行了简单的设计，只显示了我的文本和一个水平分隔符，以便解决问题，但文本仍然遵循 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 进行顶部导航，这就是为什么 resize down to size 不会在小提琴上风格化。

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

【问题讨论】：

标签： html css twitter-bootstrap media-queries

【解决方案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 中。

【讨论】：

这会让我为每个页面制作第二个 html 文件，每个页面都使用引导程序的移动调整内容大小吗？
Bootstrap 只是一个让您的生活变得非常简单的样式表。您拥有的每个站点，都可以将内容放置在网格中。此外，您根本不需要隐藏导航。 Bootstrap 创建响应式导航并将其余部分隐藏在桌面上。 getbootstrap.com/css/#grid 将更好地解释网格。在移动设备上隐藏您的内容并不是一个好习惯——您应该能够拥有一个功能齐全的网站，无论大小如何都能显示您的所有内容。 Bootstrap 将为您处理样式。您还需要为导航加载 Bootstrap jQuery。
我真的很喜欢 bootstrap 可以做的事情，但我真的只想将它用于标题和任何类型的内容，我可以对我当前的桌面内容进行最少的改动。如果我要以这种方式使用它，我基本上必须使用 BS 重建我的网站 =/
并非如此。您是否按照我的建议尝试将内容放在三个 div 中？
是的，如果我替换我的标签并将标记本身放入其中，它就可以正常工作。但在这种情况下，它不会显示桌面样式，因为我的标签将不再存在 - 只有引导程序提供的标签。我需要的是完整的桌面版本，带有我的自定义样式（现在可以正常工作）和用于移动设备的断点引导移动格式。在阅读了 API 之后，我只是想不通，如果不创建网站的第二个移动版本，我怎么能做到这一点。

【解决方案2】：

或者您可以使用引导程序默认导航并根据需要设置样式。

bootstrap nav

【讨论】：