css - 为什么@media (max-width : 767px) repeated in twitter bootstrap

Question

根据 bootstrap-responsive.css 文件，媒体查询 @media (max-width: 767px) 重复意味着它在文件中出现了两次。为什么重复？

您可以在这里查看文件 http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Answer 1

嗯，我当然不能声称理解开发人员编写 CSS 时的意图，但这就是我的想法...

我相信媒体查询的重复只是为了提供更大程度的 CSS 文件模块化。请注意，@media (max-width: 767px) 和 @media (min-width: 768px) and (max-width: 979px) 实际上在文件，所以这不太可能是异常。

这些媒体查询的第一个声明似乎是处理添加到元素以在特定浏览器宽度下隐藏/显示它们的类，因此实际上在不同的设备上选择性地起作用(指定 display 属性) .第二个声明似乎处理作为 Twitter Bootstrap 设计原则基础的各种类，指定 12 列网格系统中使用的各种类的样式(宽度、边距、最小高度等)。

第一组的类可以根据开发人员的心血来潮应用，以便在各种设备上查看页面时隐藏/显示某些元素。第二组类的应用比第一组更严格，因为它们是框架网格系统的更具定义性的特征(例如，您可以为元素类提供 hidden-phone 和visible-tablet 来自第一组并查看两者的效果，但是给元素类 span12 和 span6 只会导致最后一个 -给定的类生效)。

这是因为第一组类在应用上与第二组类有很大不同，所以媒体查​​询声明被声明了两次，每组一个。

在 CSS 的可扩展和模块化架构(2012 年)中，Jonathan Snook 评论了模块化的概念，指出，

Yes, this does mean that the media query declaration may (and likely will) get declared multiple times but it also allows for all information about a module to be kept together.

(如果我在提及样式/CSS/HTML 时使用了错误的术语，我深表歉意!我还在学习中...)