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

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

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

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

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

标签： cssmedia-queries

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

在代码的最后

大多数在线可用的 CSS 模板通常将其媒体查询保留在整个代码的底部，从而更容易访问和使用响应功能。每当重点更多地放在“追逐设备宽度”上时，这种类型的编码实践就会有所帮助。

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

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

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

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

这确实意味着代码稍微多一些，但也可以通过在断点和节结束处进行分组来减少这些代码。

这种样式在网上提供的模板中很少见，但这是一种持续的趋势。

总结：我个人认为将所有@media查询放在一起在底部，但是如果我必须分担样式的工作，我会选择将样式和@media查询放在一起。

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