css - 在 Twitter Bootstrap 中，有没有一种方法可以在不使用媒体查询的情况下检测屏幕宽度(xs、sm、md、lg)？

Question

假设我希望我的页脚在 XS 分辨率下为橙色。

我当然可以编写媒体查询来执行此操作。

@media (max-width:767px) {
 .footer {
   background-color:orange;  
 } 
}

但这有点麻烦。如果有另一种不使用媒体查询的方法来执行此操作会很好吗？

说一个“启用断点包装器”的 Bootstrap 选项。这将使用 js 将 say wrapper-sm 或 wrapper-lg 应用到我可以用作下降器的 body 标签。

例如

.wrapper-sm .footer {
  background-color:orange;  
}

是否存在这样的机制或类似的东西？

如果没有，是否有一种聪明的方法可以使用 LESS(或 js)来促进这一点？

Answer 1

...或者您可以在媒体查询中编写自己的类并使用它们，例如:

@media (max-width:767px) {
  .wrapper-sm {
    background-color:orange;
  }
}

...然后按照您的要求简单地将它应用到您的类(class)中。

..对其他类(class)做同样的事情。