在Twitter Bootstrap有没有办法检测屏幕宽度(xs,sm,md,lg)而不使用媒体查询?

时间:2015-11-24 15:21:48

标签: css twitter-bootstrap less

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

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

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

但这有点麻烦。如果有另一种方法可以在不使用媒体查询的情况下进行此操作会很好吗?

说一个“启用断点包装器”的引导选项。这将使用js将say wrapper-sm或wrapper-lg应用于body标签,我可以将其用作下行器。

例如

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

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

如果没有,是否有一种聪明的方法可以用LESS(或js)来促进这个?

2 个答案:

答案 0 :(得分:1)

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

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

...然后根据您的要求将其应用于您的课程。

..并为其他班级做同样的事情。

答案 1 :(得分:0)

是否可以为它编写包装器,但为什么要这样做呢? 如果是因为您的概述,我想推荐 SASS 。您可以将多个文件用于不同的屏幕大小。