css - 媒体查询忽略 "medium"选择

Question

我正在使用媒体查询为多个视口(viewport)大小调整单个代码块的大小。我遇到的问题是，在我的“中等”位置上方和下方，一切都按预期工作，在 992 和 1199 尺寸之间，它忽略了我的样式。

CSS

 /* Small devices (tablets, 768px and up) */
@@media screen (min-width: 768px) and (max-width: 991px) {
    .smallDevices {
      padding-bottom:30px;
      margin-bottom:10px;
      height: 750px;
    }
    .smallScreenStyle{
     height: 750px;
     margin-bottom:10px;

    }
}

/* Medium devices (desktops, 992px and up) */
@@media screen (min-width: 992px) and (max-width:1199px) {
    .midScreenStyle{
        height:650px
    }
}

/* Large devices (large desktops, 1200px and up) */
@@media (min-width: 1200px) {
    .largeScreenStyle{
       height:650px;
    }
}

HTML:

<div class="col-md-12 no-padding backgroundImageForPage smallScreenStyle midScreenStyle largeScreenStyle" > **strong text**</div>

Answer 1

这是组合媒体功能和媒体类型的正确语法:

@media screen and (min-width: 992px) and (max-width:1199px) 

注意媒体类型和媒体功能之间的和