如何覆蓋CSS媒體類？

我爲我的項目使用了一些css庫。如何覆蓋CSS媒體類？

這圖書館此類：

@media only screen and (max-width: 480px) { 
    .nav-tabs>li { 
     margin-bottom:3px; 
    } 
    .nav-tabs>li, 
    .nav-tabs>li>a { 
     display:block !important; 
     float:none !important; 
     border:0 !important; 
     background-color:rgba(0,0,0,0.01); 
    } 
    .nav-tabs>li>a :focus, 
    .nav-tabs>li.active>a { 
     background-color:rgba(0,0,0,0.05); 
    } 
}

當屏幕的尺寸越小則480px的li元件佈局被改變。

當屏幕尺寸小於280px（覆蓋 - 最大寬度：480px）時，我需要更改默認行爲。

我不想改變原有的庫文件，所以我貼這個類：

@media only screen and (max-width: 280px) { 
    .nav-tabs>li { 
     margin-bottom:3px; 
    } 
    .nav-tabs>li, 
    .nav-tabs>li>a { 
     display:block !important; 
     float:none !important; 
     border:0 !important; 
     background-color:rgba(0,0,0,0.01); 
    } 
    .nav-tabs>li>a :focus, 
    .nav-tabs>li.active>a { 
     background-color:rgba(0,0,0,0.05); 
    } 
}

我自定義的CSS文件中。

但我仍然得到默認行爲，li元素佈局僅在屏幕尺寸小於480px時纔會更改。

任何想法，爲什麼我不能覆蓋上面的CSS類？

來源

2017-05-29 Michael

我在實際樣式中看不到任何區別。 – Blazemonger

@Blazemonger寬度的差異280px而不是480px – Michael

你不用擔心屏幕尺寸低於320px：https：//ux.stackexchange.com/questions/74798/are-there-devices-narrower-than-320px-and -data-on-their-usage-for-web-browsing –

我想你想要一些小於280像素的規則和其他280到480之間的規則。對嗎？

@media (max-width:480px) and (min-width:281px) { 

}

來源

2017-05-29 14:13:36

感謝post.Where我把這個代碼？ – Michael

如何覆蓋CSS媒體類？

回答

相關問題