css - 如何为主题中的面板元素使用最小宽度或最大高度？

Question

如何在响应式主题中对面板元素使用最小宽度或最大高度(在我的例子中，使用 Zircon for Drupal 7 https://www.drupal.org/project/zircon)？使用 min-width 时，元素在为手机调整大小时会重叠。最大高度往往不可用。你能指出在哪里更改 css 以使其适用于这两种情况或具有最小宽度的情况吗？

例如，在用于自适应面板元素的 page.css 中使用了一些类(pane1 和 pane2)。总共有 3 个 Pane 。第三个 Pane 工作正常并向下移动，但 Pane ​​1 和 Pane 2 开始相互重叠。

在 page.css(Zircon 主题)中:

pane1{ 最小宽度:300px；

pane2{ 最小宽度:300px；

pane3{ 最小宽度:300px；

Answer 1

使用媒体查询。例如:

CSS:

@media all and (max-width: 500px) {
    pane1{
        min-width: 200px;
    }
}

此代码仅在浏览器宽度小于(或等于)500px 时适用。

我不知道我是否清楚地理解你，但我希望这会奏效。