是否可以在Bootstrap的不同屏幕尺寸中使用if语句？

Question

我使用Stylus和Bootstrap 3，并希望根据不同的屏幕大小设置我的博客填充属性，所以我写了以下内容：

.blog
    margin-bottom: 20px
    if @screen-sm-min
        margin-bottom: 10px

然而，即使我运行我的应用程序，它根本没有变化。我不确定我的语法有什么问题。为什么这不好用？如何在这里解决问题？

Answer 1

您需要使用CSS media queries。

话说：

@media (min-width: 1000px) and (max-width: 1200px) {
  .. add some styles here...
}

与说法相同：

if (the minimum width of the screen is 1000px && the maximum width of the screen is 1200px) {
  .. add some styles here .. 
}

Answer 2

您应该阅读的内容是响应式设计媒体查询。 您可以阅读此内容，例如：http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

但简单的谷歌搜索响应式设计会给你带来很多结果。