媒体查询中的 CSS3 转换？

Question

我一直致力于利用 CSS3 转换和媒体查询的响应式设计网站。因此，我创建了几个类名为“slider”的 div。我的 CSS 中有两条规则，一条用于声明悬停状态宽度，另一条用于指定过渡。

例如:

#navcontainer .slider:hover{
width: 38px;
}
#navcontainer .slider{
-webkit-transition: width 2s;
}

以下将起作用，但当我在这样的媒体查询中添加另一个规则时不起作用:

@media(max-width: 440px){
#navcontainer .slider:hover{width: 56px;}
}

有什么建议吗？

Answer 1

它应该可以工作...但我通常使用“@media only screen and (max-width: 440px){}”，而不仅仅是@media(){}。

您的媒体查询位于您的 css 文件的底部？ (应该没什么区别，但谁知道呢？)。另外，我认为您应该为您的转换使用其他供应商前缀:

transition:...;
-o-transition:...;
-moz-transition:...;
-webkit-transition:...;

我还会尝试将这些过渡线复制到 @media() 的内部{}

再说一次，我认为它应该按原样工作。