当用户使用较小的屏幕尺寸时，停用css效果

Question

我使用Bootstrap开发了一个网站，我对链接有一些css效果

@-webkit-keyframes socialanimation{
    from{opacity: 0.3; height: 40px;}
    to{opacity: 1; height: 50px;}
}

@keyframes socialanimation{
    from{opacity: 0.3; height: 40px;}
    to{opacity: 1; height: 50px;}
}

问题在于，当用户处于较小的屏幕时，此效果会产生问题。

当用户处于特定屏幕尺寸时，有没有办法停用效果？

Answer 1

您只需使用@media次查询：

@media screen and (max-width: 800px) {
    @-webkit-keyframes socialanimation{
        from{opacity: 0.3; height: 40px;}
        to{opacity: 1; height: 50px;}
    }

    @keyframes socialanimation{
        from{opacity: 0.3; height: 40px;}
        to{opacity: 1; height: 50px;}
    }
}

在这种情况下：800px及更少。

Answer 2

将媒体查询放在特效CSS下方。 e.g。

@media screen and (max-width: 768px) {
    /* override previous css special effects here */
}

See also