Question

我正在为一个传统网站工作，其媒体查询似乎没有对3个类中的1个产生影响。受影响的类是.free-ship，.wholesale，.chronicles

标准屏幕尺寸的css为：

    /* Shipping section - Home page */
.free-ship, .wholesale, .chronicles {
    text-align:center;
    height:180px;
    width:30%;
}
.chronicles {
    margin-right:10px;
}
.chronicles a, .wholesale a {
    color:#fff; 
}

现在我已将以下css作为媒体查询：

/* Media Queries */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .free-ship, .wholesale, .chronicles  {
        width:100%!important;
    }
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .free-ship, .wholesale, .chronicles {
        height:230px;
    }
}

问题是，媒体查询似乎不适用于.wholesale类，我无法弄清楚为什么？再次，这不是我的网站，我只是想帮忙。该网站在这里（为了隐私而删除）。代码指的是页面中间附近的黑色/灰色框。

任何建议都会受到欢迎。我用css lint检查了custom.css文件，这没有显示任何错误，所以我正在寻找下一步应该看的地方？

提前谢谢你。 d

Answer 1

在实际网站上，查询似乎没有定位＆＃34; .wholesale，＆＃34;但它取而代之的是一个名为＆＃34; .world-ship＆＃34;的老班级。

您可能更改了班级名称，并且在媒体查询中没有更改，或者它没有被推送到现场。

Media Query with ".world-ship" class

Answer 2

好的......这个问题对我来说完全疏忽了，我忘记了网站是通过CDN缓存的，所以即使我已经更新了css文件并多次清除了网站缓存，但这些更改并未采取影响。我已经清除了CDN上的缓存及其更新。

显然是树木的问题。感谢您的回答和评论。

媒体查询仅影响3个元素中的2个？

2 个答案: