Question

我的品牌是一个字符串，我想在md和大屏幕中夸大字体大小。

我在CSS文件中尝试了以下CSS覆盖，但遗憾的是它被忽略了。我不想使用基于px的if语句来执行此操作。谁知道该怎么办？

func (this *Home) AddRoomName(fieldname, value string) {
    h := reflect.ValueOf(this).Elem()
    h.FieldByName(fieldname).Set(reflect.ValueOf(value))
    return
}

css代码

@IBAction func tappedCustomBackButton(sender: AnyObject) {
    self.navigationController?.popViewControllerAnimated(true)
}

Answer 1

您在媒体查询中使用max-width。所以以下Less代码：

@media (max-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

编译成CSS，如下所示：

@media (max-width: 1200px) {
  .navbar-brand {
    font-size: 50px;
  }
}

前述意味着当您的屏幕宽度超过1200像素时，您的font-size: 50px不会被应用。对于小于1200px @media (max-width: 1200px)的屏幕，评估始终为真！所以你的字体确实不会更小。

使用max-width时，您应该从最大的广度开始：

@media (max-width: @screen-lg) {}
@media (max-width: @screen-md) {}
@media (max-width: @screen-sm) {}
@media (max-width: @screen-xs) {}

或者注意Bootstrap的代码首先在移动设备上运行，另请参阅http://getbootstrap.com/css/#grid-media-queries。首先在没有任何媒体查询的情况下定义样式规则（默认），然后使用min-width等定义下一个广泛。

如果您想设置max-width，可以使用：

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

请注意，最大屏幕的@media没有设置max-width。

您可以尝试使用以下少量代码：

@import "less/variables";
@import "less/mixins";

navbar-brand {
font-size:15px;
}

@media (min-width: @screen-sm) {
            .navbar-brand {
        font-size:20px;
        }

}

@media (min-width: @screen-md) {
            .navbar-brand {
        font-size:30px;
        }

}
@media (min-width: @screen-lg) {
            .navbar-brand {
        font-size:50px;
        }

    }

上面的代码编译成CSS如下：

navbar-brand {
  font-size: 15px;
}
@media (min-width: 768px) {
  .navbar-brand {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .navbar-brand {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .navbar-brand {
    font-size: 50px;
  }
}

演示：http://www.bootply.com/gMEHaCpSCB

Bootstrap Navbar-Brand Text不缩小

1 个答案: