根据 bootstrap-responsive.css 文件，媒体查询@media (max-width: 767px)是重复的，这意味着它在文件中出现了两次。为什么会重复？
您可以在此处查看文件http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
问问题
5164 次
1 回答
2
嗯，我当然不能声称理解开发人员在编写 CSS 时的意图，但这就是我的想法……
我相信媒体查询的重复只是为了提供更大的 CSS 文件模块化。请注意，两者@media (max-width: 767px)和@media (min-width: 768px) and (max-width: 979px)实际上在文件中出现了两次，因此这不太可能是异常情况。
这些媒体查询的第一个声明似乎处理添加到元素的类，以在某些浏览器宽度下隐藏/显示它们，因此在不同的设备上选择性地生效（指定display属性）。第二个声明似乎处理了 Twitter Bootstrap 设计原则基础的各种类，指定了 12 列网格系统中使用的各种类的样式（宽度、边距、最小高度等）。
第一组的类可以在开发人员的心血来潮时应用，以在各种设备上查看页面时隐藏/显示某些元素。第二组的类比第一组应用得更严格一些，因为它们是框架网格系统的一个更明确的特征（例如，您可以从第一组中给出两者的元素类hidden-phone并查看两者的效果visible-tablet, 但给元素类span12和span6只会导致最后一个类生效）。
这是因为第一组类在应用上与第二组类有很大不同，所以媒体查询声明被声明了两次，每组一个。
在Scalable and Modular Architecture for CSS (2012) 中，Jonathan Snook 评论了模块化的概念，他说，
是的，这确实意味着媒体查询声明可能（并且可能会）多次声明，但它也允许将有关模块的所有信息保存在一起。
（如果我在提到样式/CSS/HTML 时使用了错误的术语，我深表歉意！我还在学习......）
于 2012-06-21T19:19:53.280 回答