现在，我理解“断点”是如何工作的 - 当浏览器窗口达到一定宽度时，查询中的元素会发生变化。现在，这是我的问题：
如果我开始设计一个网站，并开始为我想要在移动设备上查看的方式添加样式，那么当设计完成并且我想对其进行扩展时，这样做的有效方法是什么？ 目前，我能想到的只是添加一个具有更高的最小宽度断点的查询，然后从我已经创建的代码中粘贴CSS并分别在查询中开始进行更改。我强烈认为这不是正确的做事方式，所以这就是我寻求帮助的原因。谢谢！
答案 0 :(得分：0)
在制作设计和思考移动设备时，你有正确的方法。现在你需要做的是考虑将它调整到大的设备宽度时的情况。
您可以查看很多内容，很多人可能会建议您查看Bootstrap等框架，以了解他们如何使用媒体查询来实现许多功能。我的建议是尽可能少地使用媒体查询。尝试至少支持两种设备宽度：移动/平板电脑和台式机。由于移动/桌面可以互换，新设备总是会出现，因此最好采用一致的设计。但是，如果您花时间正确地操作，则可以安全地支持移动/平板电脑/台式机。
现在，我将尽力为您保持简单，并介绍最正式的媒体查询方式并从那里进行扩展。
让我们从响应式网页设计的最重要但最简单的构建块开始：容器元素。此容器元素将用于您网站中的内容，内容供您选择想象，因为这些容器需要相应地从设备宽度扩展到设备。
导航栏示例：
.navigation-bar-container {
position: relative;
width: 100%;
min-width: 320px;
max-width: 100%;
height: 100px;
}
检查上面的代码是如此简单直接，它有什么作用？我可以想象它会保存导航栏中的所有元素。它当然可以用于不仅仅是这种方式，但是现在我们都关心它的导航栏。
它的最小宽度为320px，因为您需要支持的最小屏幕可能是320px宽（iPhone任何人），因此无需缩小您的元素。
最大宽度很有趣。目前导航条的最大宽度为100％，因为我说它是...... 没有，这没有任何意义。为什么是100％？这是因为我想让它始终扩展到屏幕的整个宽度，无论屏幕宽度如何。这是它的默认行为。
现在尝试考虑当您使用不同的屏幕尺寸（如移动设备）时导航栏的宽度会发生什么变化。元素会发生什么，它们会随着容器缩小吗？当屏幕尺寸太小时，它们是否适合？ 输入媒体查询。
769px或以上......当然可能会发生变化。最大宽度为100％，宽度100％表示它将根据屏幕尺寸进行调整。做它的事情的默认行为，是的！
421px至768px ...当然可能会发生变化如果你的元素不适合所有的平板电脑尺寸，并使你的导航栏看起来很奇怪，是的尝试它扔一些div和东西并缩小它，那么我们该怎么办？是时候通过使用好的旧媒体查询来使它们适合：
@media screen and (max-width: 768px) {
.navigation-bar-container {
display: none;
}
.sliding-navbar-container {
display: block;
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 320px;
}
}
是的，我根本没有让它们适合。我将旧的navigation-bar-container宽度换成了另一个宽度。使用媒体查询时，什么是好的和安全的经典示例。我没有犹豫不决，如何适应这些元素，请不要犹豫我的朋友，只需将导航栏换成另一个可以在那里的小型设备上工作的导航栏。
请注意新导航栏实际上如何考虑其宽度320px，它将完全位于屏幕的顶部和左侧，在那里做得很好。如何让它滑入和滑出，弹出，看起来整洁是另一个问题！除非你好奇，否则不要问...回到媒体查询！
但是，如果我们说的是一个会改变的元素，让我们说它总是占据你屏幕宽度的100％，然后收缩占据屏幕宽度的一半，仅用于平板电脑/风景电话设备，然后你可能想要使用这样的媒体查询：
@media screen and (min-width: 421px) and (max-width: 768px) {
max-width: 50%;
}
非常小而简单的改变。最大宽度很有趣，因为它控制您的内部宽度，默认情况下设置为100％。此更改将强制您的元素调整到屏幕宽度的50％，同时仍然调整大小以调整为新元素宽度的100％。将其设为max-width: 50vw也是一个好主意，因为它将调整为视口宽度，从而使其即使在处理广泛不同的视口时也能响应。
因此，我们得出结论 TLDR ：