Question

使用我的CSS样式表中的以下代码来定位我的jumbotron：

@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;
    }

}

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

我已尝试仅使用min-width且仅使用max-width，除了在上面的代码中同时使用and。这三个都没有变化。

Answer 1

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

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

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

@media (max-width: 767px) {

引导媒体查询

1 个答案: