响应式 CSS，同时保持设置的宽度答案

【问题标题】：Responsive CSS whilst maintaining set widths响应式 CSS，同时保持设置的宽度
【发布时间】：2017-01-13 15:23:57
【问题描述】：

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

有没有办法将设置的宽度应用于启用响应式 CSS 的对象？

【问题讨论】：

标签： css user-interface layout gwt vaadin

【解决方案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;
  }
}

【讨论】：