css - Bootstrap 媒体查询

Question

在我的 CSS 样式表中使用以下代码来定位我的超大屏幕:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 

    .jumbotron {
        padding-top: 500px !important;
        padding-bottom: 350px !important;
        margin-bottom: 0;
        background: url(../images/image.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

}

目的只是增加我的超大屏幕在移动显示器中的顶部和底部填充。但是这段代码根本不影响我的超大屏幕。我究竟做错了什么？

我试过只使用 min-width 和 max-width，此外还像代码中那样将两者与 和 一起使用多于。这三个都没有导致任何变化。

Answer 1

@screen-sm-min 和 @screen-sm-max 是较少的变量。因此，如果您想在 CSS 中使用它们，则必须指定实际值:

@media (min-width: 768px) and (max-width: 991px) {

但是如果你只想在移动设备上应用一个css样式，正确的媒体查询应该是:

@media (max-width: 767px) {