Chrome 未按预期响应@media 查询

Question

我正在构建一个响应式网站，但遇到了一个问题，Chrome 没有像 Firefox 那样实现 @media 查询。

在图片上，Firefox 位于左侧（我期望的设计外观），Chrome 位于右侧。如您所见，Chrome 不会根据 @media 查询进行更改。在移动设备上也是如此。

CSS：

@media-medium-width: 768px;

.bm-s-section-ill-wrap-item {
    max-width: 100%;
    margin: 2px;
    border-radius: 8px;
    border: 2px solid @dark-blue;
    flex: 1 1 48%;

    @media(min-width: @media-medium-width) {
        margin: 6px;
        border-width: 4px;
        flex: 1 1 32%;
    }
}

Answer 1

.bm-s-section-ill-wrap-item {
     max-width: 100%;
     margin: 2px;
     border-radius: 8px;
     border: 2px solid @dark-blue;
     flex: 1 1 48%;
}
@media screen and (max-width:768px) {
     .bm-s-section-ill-wrap-item {
          margin: 6px;
          border-width: 4px;
          flex: 1 1 32%;
      }
}