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条最终规则涵盖了所有的可能性，宽度大于或小于480px，因此第一条规则永远不会适用。

我已更改它，以便您有一个较低分辨率的样式，另一个较高分辨率的样式，并且默认应用于

之间

.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>

宽度：x％根据内容大小而变化

1 个答案: