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

我正在努力将我的桌面网站缩小到手机版。该网站是令人难以置信的静态，所以这个过程应该不会花太长时间。不过，我还不习惯缩小到手机的规模，所以我正处于一个学习过程中，并在寻求一些帮助。我的菜单已就位，屏幕缩小时，移动菜单显示，桌面菜单隐藏：

@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（最小宽度：569px）媒体查询中包含整个CSS吗？或者这是一个单独的“如果/然后”规则吗

这是我的小提琴。对顶部导航使用引导，所以这就是为什么“调整大小到大小”在小提琴上没有样式化

移动设备不需要

（最小宽度：220px）

，只要

（最大宽度：568）

就足够了。如果您使用的是Bootstrap，您只需将所有内容放入一个网格，它就会自动为移动设备扩展

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

---

对于站点的非移动部分，您不必将整个CSS放置在

最小宽度中。
或者您可以使用引导默认导航并根据需要设置样式

这是否会让我为每个页面创建第二个html文件，每个页面都使用bootstrap的移动大小调整内容？bootstrap只是一个样式表，让您的生活变得非常简单。您拥有的每个站点都可以将内容放置在网格中。此外，您根本不需要隐藏导航。引导创建响应导航并隐藏桌面上的其余导航。将更好地解释网格。在手机上隐藏你的内容不是一个好的做法——你应该有一个功能齐全的网站，无论大小都能显示你的所有内容。Bootstrap将为您处理样式。您还需要为nav加载Bootstrap jQuery。我真的很喜欢Bootstrap的功能，但我真的只想将其用于标题和任何类型的内容，对当前桌面内容的更改最少。如果我打算以这种方式使用它，我基本上必须使用BS来重建我的站点。你有没有试着按照我的建议把内容放在三个div中？是的，如果我替换我的标记并将标记本身放在其中，效果就很好了。但在这种情况下，它将不会显示桌面的stylng，因为我的标签将不再存在——只有bootstrap提供的标签。我需要的是完整的桌面版本和我的自定义样式（现在可以正常工作）以及用于mobile的break point bootstrap mobile格式。在阅读了API之后，我不知道如何在不创建第二个移动版本的情况下做到这一点。
<div class="container">
  <div class="row">
    <div class="col-md-12">
    <!-- All your content after the nav -->
    </div>
  </div>
</div>