html - CSS 中的全 Angular 列表

Question

我正在尝试为我的网站实现新布局。我能够使用 JS 实现它，但我正在尝试使用纯 CSS。

例子是http://tympanus.net/Development/GridLoadingEffects/

它从 3 列开始，当您将页面调整得更小时，框会调整大小，直到它变得足够小以至于变成两列。

与此类似，我试图让我的方形图像水平列表占据页面的整个宽度，方形的最大宽度为 300 像素。例如:页面从 5 列开始，页面宽度开始缩小，框的宽度也开始缩小。它达到了 4 300 像素的框能够适合当前宽度的程度。

我搞砸了 max-width 和 min-width，但我是 CSS 新手，我觉得我遗漏了什么。我环顾四周，

有什么想法吗？

Answer 1

您可以使用媒体查询为不同的浏览器宽度设置不同的 css 规则。

@media (min-width: 300px) and (max-width: 600px) {
    someClass {
      /* some rules for browser width between 300 and 600px */
    }
}

关于媒体查询的更多信息:

• > ss-tricks.com
• > MDN
• > selfhtml