停用CSS效果，當用戶使用使用引導一個較小的屏幕尺寸

Question

我開發了一個網站，我的鏈接

@-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;} 
} 

的問題是，當一個用戶在一個小屏幕此效應會產生一些CSS特效一個問題。

有什麼辦法，當用戶是一個特定的屏幕尺寸下停用的影響？

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;} 
    } 
} 

在這種情況下：800像素少。

Answer 2

將媒體查詢放在特效CSS下面。例如

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

See also