如何有效地使用媒体查询？

Question

现在，我了解了 "breakpoints" 的工作原理 - 当浏览器 window 达到特定宽度时，查询中的元素会发生变化。现在，这是我的问题：

如果我开始设计一个网站，并开始为我想要在移动设备上的外观添加样式，当设计完成并且我想对其进行扩展时，什么是有效的方法？目前，我能想到的就是添加一个具有更高最小宽度断点的查询，然后从我已经制作的代码中粘贴 CSS 并开始分别在查询中进行更改。我有一种强烈的感觉，这不是正确的做事方式，所以这就是我寻求帮助的原因。谢谢！

Answer 1

在进行设计和首先考虑移动设备时，您的方法是正确的。现在您需要做的是考虑将其调整为大设备宽度时的效果。

您可以研究很多东西，许多人可能会建议您查看 Bootstrap 等框架，只是为了了解它们如何使用媒体查询来实现许多事情。我的建议是尽可能少地使用媒体查询。尝试支持至少两种设备宽度：mobile/tablets 和桌面。由于 mobile/desktop 可以互换并且新设备总是会出现，因此最好采用一致的设计。但是，如果您花时间适当地这样做，您可以安全地支持 mobile/tablet/desktop。

现在，我将尽量使它对您来说非常简单，并介绍正确执行媒体查询并从那里扩展的最基本方法。

让我们从最重要但最简单的响应式网页设计构建块开始：容器元素。此容器元素将用于您网站中的内容，内容供您选择想象，因为这些容器将相应地从设备宽度扩展到设备。

导航栏示例：

.navigation-bar-container {
    position: relative;
    width: 100%;
    min-width: 320px;
    max-width: 100%;
    height: 100px;
}

看看上面的代码，这么简单明了，它做了什么？我可以想象它将所有元素都放在导航栏中。它的用途肯定不止于此，但目前我们只关心它的导航栏。

它的最小宽度是 320px，因为您需要支持的最小屏幕可能是 320px 宽（iPhone 任何人）所以没有必要将您的元素缩小到该宽度以下.

最大宽度很有趣。目前导航栏的最大宽度是 100%，因为我说它是...no，这没有任何意义。为什么是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%，然后缩小到屏幕宽度的一半 tablet/landscape phone设备，那么你可能想使用这样的媒体查询：

@media screen and (min-width: 421px) and (max-width: 768px) {
    max-width: 50%;
}

很小很简单的改变。最大宽度很有趣，因为它控制您的内部宽度，默认设置为 100%。此更改将强制您的元素调整为屏幕宽度的 50%，同时仍调整大小以调整为新元素宽度的 100%。使它成为 max-width: 50vw 也是一个好主意，因为它会改为适应 视口宽度 ，从而即使在处理广泛不同的视口时也能响应。

因此，我们得出结论 TLDR:

根据需要使用尽可能少的媒体查询大小，因为如果您需要很多，那么您做错了，严重的！
如果你需要很多，无法避免，那就了解一下Bootstrap，让其他人担心媒体查询的噩梦。
在容器中思考，您的元素将在其中坐下并四处移动。想一想这些容器将如何从桌面流向移动设备，反之亦然。把思想放在背后是至关重要的，因为它是你响应行为的来源，应该是你媒体查询的焦点。
虽然这里没有介绍，但您可以轻松查看媒体查询和 font/image 示例。响应式字体和图像是您内容的重要组成部分，它们本身应该用媒体查询来解释。背景图像更改，更好的可读性取决于您所使用的设备，所有这些都很重要，并且可以通过媒体查询进行简化。
我把它放在最后是因为它很重要使用SASS/SCSS并在使用媒体查询时为自己省去很多麻烦（以及所有CSS).查看可以与媒体查询一起使用的混合、变量、部分。如果您不知道并立即开始使用它，您将会爱上它。
需要更多？好享受Google's responsive web design fundamentals

祝你好运！！！

如何有效地使用媒体查询？

How to use media queries in an effective way?

css

media