屏幕大小會覆蓋其他屏幕大小：S

Question

我一直在嘗試根據屏幕大小對我的類別圖像進行更改。但是現在只有第一個屏幕寬度尺寸被使用。好像其他的代碼被第一行代碼覆蓋（max-width：769px）。 （在這個站點：http://origami.directory/）

我該怎麼做，所以它應該做3次改變？

.category-list-item { 
    float: left; 
    padding: 1em; 
} 
@media screen and (max-width: 769px) { 
    .category-list-item { width: 20%; } 
}; 
@media screen and (min-width: 480px) { 
    .category-list-item { width: 25%; } 
}; 
@media screen and (max-width: 480px) { 
    .category-list-item { width: 33.33%; } 
}; 

如果有人能幫助我解決這個問題，我會非常感激！ /Martin

Answer 1

1. 從查詢結束刪除多餘的分號;。

你的查詢應該是這樣的：

@media screen and (max-width: 769px) { 
    .category-list-item { width: 20%; } 
} 
@media screen and (min-width: 480px) { 
    .category-list-item { width: 25%; } 
} 
@media screen and (max-width: 480px) { 
    .category-list-item { width: 33.33%; } 
} 

你的查詢彼此使第二查詢過時的衝突。指定範圍爲每個這樣的：

@media (max-width: 480px) { 
 
     .category-list-item{width: 33.33%;} 
 
    } 
 

 
    @media (min-width: 481px) and (max-width: 768px) { 
 
     .category-list-item { width: 25%; } 
 
    } 
 
    @media (min-width: 769px) { 
 
     .category-list-item { width: 20%; } 
 
    }

我不是很肯定與min-width:769px一部分，所以才讓我知道究竟是你想這樣做，我會相應地修復。以上只是爲了向您展示查詢的基本工作原理。