Question

如何在响应主题中使用面板元素的最小宽度或最大高度（在我的情况下，使用Zircon for Drupal 7 https://www.drupal.org/project/zircon）？使用最小宽度时，在为移动电话调整大小时元素会重叠。最大高度往往不可用。你能指出在哪里改变css以使其适用于两种情况或具有最小宽度的情况吗？

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

在page.css（锆石主题）中：

pane1 {min-width：300px; }

pane2 {min-width：300px; }

pane3 {min-width：300px; }

Answer 1

使用媒体查询。例如：

CSS：

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

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

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

Answer 2

媒体查询将是您的答案：

@media screen and (min-width: 767px){
  .pane1, .pane2, .pane3{
    min-width:300px;
  }
}

@media screen and (max-width:766px){
  .pane1, .pane2, .pane3{
    min-width:150px;
  }
}

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

2 个答案: