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

并应用于filtTypeLabel相应的响应CSS块：

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