我刚刚学习 html 和 css，并且刚刚完成了一个登陆页面项目。当我最后检查我的 CSS 时，我意识到我有多个媒体查询，所有查询都针对相同的条件（最大宽度），但应用于不同的元素。
我知道您可以在媒体查询中放置多个元素，但最佳实践是什么？
目前，我有每个单独的媒体查询位于该元素的设置 CSS 之后
即 #header 后面跟着 @media (max-width:640px) #header{stuff;}}
CSS3 中引入的媒体查询用于针对不同媒体类型的响应式 CSS。由于通常 CSS 代码本身用于描述文档或页面的呈现，因此响应能力完全是一个单独的功能，因此通常它们在 CSS 格式化代码的末尾保持独立。但是，让我通过说明问题中提到的两种格式的用法来回答这个问题。
大多数在线可用的 CSS 模板通常将其媒体查询保留在整个代码的底部，以便更轻松地访问和使用响应功能。每当重点更多地放在“追逐设备宽度”上时，这种类型的编码实践就会有所帮助。
正如所观察到的，这允许将应用于许多元素的许多基本 CSS 属性组合在一起。
另外，考虑到 CSS 的级联性质，下面的样式通常（并非总是如此，请参阅此内容以了解更多信息）会覆盖上面的样式。通过@media样式表底部的查询，可以轻松覆盖上面的相关样式。
最后，正如 @rguttersohn 所提到的，媒体查询通常@keyframes保留在@keyframes上面@media。这使得编码更清晰，也更容易被其他人理解。
如果样式更加以布局为中心，那么将@media查询放在其样式对应项旁边非常有用。@media这样可以轻松地一次性编辑样式及其相应的查询。
这确实意味着代码会稍微多一些，但是这些代码也可以通过在断点和节结束处进行分组来减少。
这种类型的样式在在线模板中很少见，但它是一种持续的趋势。
总结一下：我个人认为将所有@media查询放在底部，但如果我必须划分样式的工作，我会选择将样式和@media查询放在一起。
另外，鉴于这个问题的范围广泛且固执己见，我认为没有答案可以确定是对还是错。我希望这个答案能为这个问题带来足够的启发和信息。