css - 响应式 CSS，同时保持设置的宽度

Question

我是 CSS 和 vaadin 的业余爱好者，试图在 Vaadin 中实现响应式 UI，但在设置 UI 对象的宽度方面遇到问题；一切似乎都破坏了响应式 CSS。这是我正在描述的示例:

 CssLayout filterTypeLOptimiseBLayout = new CssLayout();
    filterTypeLOptimiseBLayout.setResponsive(true);
    filterTypeLOptimiseBLayout.addStyleName("flexwrap");
    filterTypeLOptimiseBLayout.setSizeFull();

        Label filtTypeLabel = new Label("Filter Type Filler");
        filtTypeLabel.addStyleName("filtTypeLabel");
        filtTypeLabel.setSizeFull();
        filtTypeLabel.setResponsive(true);
        filterTypeLOptimiseBLayout.addComponent(filtTypeLabel);

并将相应的响应式 CSS block 应用于 filtTypeLabel:

 /* ---- Filter Type Filler Label ------*/
  //Basic inherited CSS
  .filtTypeLabel {
    padding: 5px;
  }

  //Mobile
  .filtTypeLabel[width-range~="0-300px"] {
    font-size: 12pt;
    margin: 5px;
  }

  //Small Browser
  .filtTypeLabel[width-range~="301px-600px"] {
    font-size: 14pt;
    margin: 10px;
  }

  //Big Browser
  .filtTypeLabel[width-range~="601px-"] {
    font-size: 16pt;
    margin: 20px;
  }

使用前面的代码，我按预期实现了按钮字体和边距的缩放，但我还想控制标签的宽度。使用 filtTypeLabel.setSizeFull(); 会导致与标签在同一行的任何内容环绕到下一行，因为标签会水平占据所有空间。调用 filtTypeLabel.setWidthUndefined(); 会破坏响应式缩放，而 filtTypeLabel.setWidth("5%"); 也会破坏它。在 CSS 中设置 max-width 和 min-width 也会破坏它。

有什么方法可以将设置的宽度应用到启用了响应式 CSS 的对象吗？

Answer 1

宽度范围检查适用于特定组件，不适用于您的窗口大小。因此，如果您的组件始终具有相同的大小，则此检查将始终显示相同的结果。您需要创建这样的组件，响应式且具有宽度范围样式，这将根据窗口大小更改其大小。并且您所有的响应式子项都必须具有子项样式。

CssLayout filterTypeLOptimiseBLayout = new CssLayout();
  filterTypeLOptimiseBLayout.setResponsive(true);
  filterTypeLOptimiseBLayout.addStyleName("flexwrap");
  filterTypeLOptimiseBLayout.setSizeFull();
  filterTypeLOptimiseBLayout.setResponsive(true);

.flexwrap {
  .filtTypeLabel {
    padding: 5px;
  }
}

//Mobile
.flexwrap[width-range~="0-300px"] {
  .filtTypeLabel {
    font-size: 12pt;
    margin: 5px;
  }
}
//Small Browser
.flexwrap[width-range~="301px-600px"] {
  .filtTypeLabel {
    font-size: 14pt;
    margin: 10px;
  }
}

//Big Browser
.flexwrap[width-range~="601px-"] {
  .filtTypeLabel {
    font-size: 16pt;
    margin: 20px;
  }
}