2017-10-13 108 views
0

我正在构建一个响应式网站,并遇到Chrome未实现@media查询与Firefox相同的问题。Chrome没有按预期对@media查询作出响应

在图像上,Firefox位于左侧(我期望设计看起来如此)和右侧的Chrome。正如您所看到的,Chrome不会根据@media查询进行更改。在移动设备上也一样。

CSS

@媒体介质宽度: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%; 
    } 
} 

enter image description here

+0

您没有使用有效的CSS。你不能像这样使用变量或嵌套选择器。 – FluffyKitten

回答

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%; 
     } 
} 
+0

我试着添加屏幕并将@media查询移动到css的根目录并更改样式,但它保持不变。我使用较少的来生成css文件,并且css本身并不正确,并且可以在Firefox上按预期工作,但Chrome可能有不同的实现方式。 – TheRuler

+0

@TheRuler不管标准如何,只包含的CSS都是*非标准CSS *您生成它或您在FF中拥有哪些开发人员插件来支持它。 – FluffyKitten

+0

好的..有解决方案吗? – TheRuler