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

如果有人可以帮我解决这个问题，我将非常感激！ /马丁

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

您的查询彼此冲突，导致第二个查询过时。为此指定范围：

＆＃13;

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

＆＃13;

我对min-width:769px部分不太确定，所以请让我知道你到底要做什么，我会相应地解决这个问题。以上只是为了向您展示查询的基本工作方式。

屏幕大小会覆盖其他屏幕：S

1 个答案: