css - 为什么@media（max-width：767px）在twitter bootstrap中重复出现

嗯，我当然不能理解开发人员在编写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评论了这种模块化概念，陈述，

是的，这确实意味着媒体查询声明可能（并且可能将）多次声明，但它也允许所有有关要保留在一起的模块的信息。

（如果我在引用样式/ CSS / HTML时使用了错误的术语，我很抱歉！我还在学习......）

为什么@media（max-width：767px）在twitter bootstrap中重复出现

1 个答案: