我正在构建一个响应式网站,但遇到了一个问题,即 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%;
}
}
最佳答案
.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%;
}
}
关于css - Chrome 没有按预期响应@media 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46734126/