html - 宽度 : x% changing depending on content size

Question

每当我的屏幕变小时，我需要帮助来更改我网站内类别图像的百分比宽度。或者图像在较小的分辨率下会变得非常小。

我想要实现的是这样的:http://www.twitch.tv/directory

我已经尝试使用这段代码来做到这一点。 (但它不工作)

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

如有任何帮助，我们将不胜感激!

/马丁

Answer 1

正如 rekire 所说，你搞砸了语法，你需要设置完整的规则。

此外，规则后不应有分号。 最后，您的 2 条最终规则涵盖了所有可能性，宽度大于或小于 480 像素，因此第一条规则永远不会适用。

我已经改变了它，这样你就有了一个低分辨率的样式，另一个高分辨率的样式，以及在两者之间应用的默认值

.category-list-item {
  background-color:red;
}
@media screen and (min-width: 769px) {
  .category-list-item { background-color: green; }
}
@media screen and (max-width: 480px)  {
  .category-list-item { background-color: blue; }
}

<div class="category-list-item">Test</div>