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

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

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

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

---

i、 e.#头后面跟着@media（最大宽度：640px）#头{stuff；}

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

在代码末尾 大多数在线可用的CSS模板通常将其媒体查询放在整个代码的底部，以便更容易访问和使用响应特性。只要重点放在“追踪设备宽度”上，这种类型的编码实践就会有所帮助

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

另外，考虑到CSS的级联特性，下面的样式通常（不总是，请参阅了解更多）覆盖上面的样式。通过样式表底部的

@media

查询，可以轻松覆盖上面的相关样式

最后，正如@rguttsohn所提到的，媒体查询以及

@关键帧

被保存在

@关键帧

的末尾，通常位于

@媒体

之上。这使得编码更清晰，也更容易被其他人理解

下面是相关的样式对应项 如果样式设置更以布局为中心，那么将

@media

查询放置在样式设置对应项旁边非常有用。这使得编辑样式及其相应的

@media

查询在一次操作中变得容易

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

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

总而言之：我个人认为将所有

@媒体

查询放在底部，但如果我必须分担样式设计的工作，我会选择将样式和

@媒体

查询放在一起

---

此外，鉴于这一问题涉及的范围广泛且固执己见，我认为没有任何答案可以确定是对还是错。我希望这个答案能为这个问题带来足够的光和信息

我通常在结束时这样做，以保持代码更干净。我对@keyframes也这么做。谢谢你的总结@米歇尔，如果答案有帮助，请投票表决。干杯：）因为我是新用户，它说upvote已经被记录，但不会公开显示。