Question

这里有CSS和vaadin的业余爱好者，尝试在Vaadin中实现响应式UI，但在设置UI对象的宽度方面存在问题;一切似乎打破了响应CSS。以下是我所描述的一个例子：

$('#upEditor')[0]

相应的响应式CSS块应用于document.getElementById('upEditor')：

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

使用前面的代码，我按预期实现按钮字体和边距的缩放，但我也想控制标签的宽度。使用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();也会打破它。在CSS中设置filtTypeLabel.setWidthUndefined();和filtTypeLabel.setWidth("5%");也会破坏它。

有没有办法将设置宽度应用于响应式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;
  }
}

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

1 个答案: