css - 如何有效使用媒体查询？

Closed. This question is opinion-based。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。
                        
                        4年前关闭。
                                                                                            
                
        
现在，我了解了“断点”的工作原理-当浏览器窗口达到某个宽度时，查询中的元素会更改。现在，这是我的问题：

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

最佳答案

首先进行设计和移动思考时，您将采用正确的方法。现在，您需要做的就是考虑将其调整为较大的设备宽度时的情况。

您可以研究很多事情，很多人可能建议您研究诸如Bootstrap之类的框架，以了解他们如何使用媒体查询来实现许多事情。我的建议是使用尽可能少的媒体查询。尝试至少支持两种设备宽度：移动设备/平板电脑和台式机。由于移动设备/桌面设备可以互换，并且总是有新设备问世，因此最好采用一致的设计。但是，如果您愿意的话，可以安全地支持手机/平板电脑/台式机。

现在，我将尝试为您简化操作，并介绍最正确的方法来进行媒体查询并从那里扩展。

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

导航栏示例：

.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结论：


根据需要使用尽可能小的媒体查询大小，因为如果您需要大量媒体查询，那么您做错了，这是认真的！
如果您需要很多，无法避免，那么请了解Bootstrap，让其他人担心媒体查询的噩梦。
在容器中思考，您的元素将在其中坐下并四处移动。想想这些容器如何从台式机流向移动设备，反之亦然。在此基础上进行思考至关重要，因为这是响应行为的根源，应该是媒体查询的重点。
尽管此处未介绍，但您可以轻松查看媒体查询和字体/图像示例。自适应字体和图像是内容的重要组成部分，因此应在媒体查询中加以考虑。背景图像的变化，更好的可读性（取决于您所使用的设备），所有这些都很重要，可以通过媒体查询来简化。
我把这个放在最后，因为IT问题很多使用SASS/SCSS并在处理媒体查询（以及所有CSS）时为您省去了很多麻烦。查看可以在媒体查询中使用的mixin，变量，局部变量。如果您不了解它，就可以立即开始使用它。
需要更多？好享受Google's responsive web design fundamentals


祝好运！！！