最好将类似的媒体查询分组在 CSS 的末尾，还是将它们分开放在 CSS 中？

Question

我正在学习 html 和 css，并且刚刚完成了一个登陆页面项目。当我最后查看我的 css 时，我意识到我有多个媒体查询都针对相同的条件（最大宽度）但应用于不同的元素。

我知道您可以在媒体查询中放置多个元素，但最佳做法是什么？

目前我有每个单独的媒体查询位于该元素的设置 css 之后

即#header 后跟@media (max-width:640px) #header{stuff;}}

Answer 1

CSS3 中引入了媒体查询，用于响应 CSS 不同的媒体类型。由于通常 CSS 代码本身用于描述文档或页面的呈现，因此响应性完全是一个单独的功能，因此通常它们在 CSS 格式代码的末尾分开。但是，让我通过说明问题中提到的两种格式的用法来回答这个问题。

代码结尾

大多数 CSS 在线可用的模板通常将其媒体查询放在整个代码的底部，以便更容易访问和使用响应功能。每当重点更多地放在 "chasing device-widths" 上时，这种类型的编码实践就会有所帮助。

据观察，这允许将应用于许多元素的许多基本 CSS 属性组合在一起。

此外，考虑到 CSS 的级联性质，下面的样式通常（并非总是如此，请参阅 this 以了解更多信息）覆盖上面的样式。 @media 查询出现在样式表的底部，它可以轻松覆盖上面出现的相关样式。

最后，正如@rguttersohn 所提到的，媒体查询与 @keyframes 一起保留在最后，@keyframes 通常在 @media 之上。这使得编码更清晰，也更容易被其他人理解。

低于相关样式同行

如果样式更 以布局为中心 ，将 @media 查询放在对应的样式旁边非常有用。这样可以轻松地一次编辑样式及其相应的 @media 查询。

这确实意味着代码略多，但也可以通过在断点和节末分组来减少这些代码。

这种类型的样式在在线模板中很少见，但它是一种持续的趋势。

总结： 我个人认为将所有 @media 查询放在底部，但如果我不得不分工设计样式，我会选择将样式和 @media 查询放在一起。

此外，考虑到这个问题的广泛性和自以为是的范围，我认为没有答案可以确定是对还是错。我希望这个答案能为问题带来足够的启发和信息。