响应 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 块应用于 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(); 会导致与标签在同一行的任何内容环绕到下一行，因为标签水平占据所有 space。调用 filtTypeLabel.setWidthUndefined(); 会破坏响应式缩放，而 filtTypeLabel.setWidth("5%"); 也会破坏它。在 CSS 中设置 max-width 和 min-width 也会破坏它。

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

Answer 1

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

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

响应 CSS 同时保持设置的宽度

Responsive CSS whilst maintaining set widths

css

layout

user-interface

gwt

vaadin