EM 中的字体大小与 VerticalPanel 的预期不同答案

【问题标题】：Font Size in EM does not behave as expected for a VerticalPanelEM 中的字体大小与 VerticalPanel 的预期不同
【发布时间】：2013-08-11 11:57:07
【问题描述】：

我希望一开始就在“PX”中修复一个字体大小（比如说 onModuleLoad），并将其余的小部件和主题放在“EM”中。这是为了帮助我动态更改不同屏幕分辨率的外观。这是我正在尝试的示例代码。

    root = RootPanel.get();
    root.getElement().getStyle().setFontSize(40, Unit.PX);
    root.setSize("100%", "100%");

    Label l = new Label("Hello World");
    l.getElement().getStyle().setFontSize(1, Unit.EM);
    root.add(l);

    VerticalPanel vp = new VerticalPanel();
    root.add(vp);

    l = new Label("Hello World");
    l.getElement().getStyle().setFontSize(1, Unit.EM);
    vp.add(l);

理想情况下，我想要两个相同字体大小的标签。但是第二个比第一个小很多。但是对于下面的代码，它可以按预期工作。

    root = RootPanel.get();
    root.getElement().getStyle().setFontSize(40, Unit.PX);
    root.setSize("100%", "100%");

    Label l = new Label("Hello World");
    l.getElement().getStyle().setFontSize(1, Unit.EM);
    root.add(l);

    SimplePanel vp = new SimplePanel();
    root.add(vp);

    l = new Label("Hello World");
    l.getElement().getStyle().setFontSize(1, Unit.EM);
    vp.add(l);

如果是这种情况，如果我希望实现一个通用的 em，我似乎应该远离垂直/水平面板。我也试过 FlexTable，但同样的问题又来了。

【问题讨论】：

标签： gwt font-size em

【解决方案1】：

您是否在 gwt.xml 中使用默认 GWT 样式之一？您的字体大小数据可能会在更复杂的面板中被覆盖。

无论如何，我自己也在使用类似的方法；我所做的是，我基本上只是在我的 CSS 开头设置整个 HTML body 的样式，在 PX 中设置字体大小，然后在其他任何地方使用 EM，并且大部分情况下效果很好。

【讨论】：

感谢您的回复。在 css 中给 body 一个恒定的宽度确实解决了这个问题。但我希望这个宽度根据不同的分辨率是动态的。我尝试使用 RootPanel.getBodyElement.getStyle 但这没有帮助。
你误会了，我的意思是在CSS中设置body的字体大小！元素从其父元素继承字体大小属性，EM 大小基于此，您希望每个元素在 PX 中具有相同的字体大小。
顺便说一句，你会想要使用RootLayoutPanel，RootPanel 用于旧浏览器中使用的怪癖模式；尽管从技术上讲，我认为您没有使用任何不适用于RootPanel 的东西，但我仍然会避免使用它。有关更多信息，请参阅here。
是的，我确实理解您的建议，即在 CSS 中应用 body 的固定大小。我试过了，它确实有效。但我一直在寻找的是，基于客户端resolution 将固定字体大小应用于body。例如屏幕 1600 为 16px。通过这种方式，我可以在em 中配置主题和自定义 css 文件中的字体大小，从而使整个网站在不同分辨率下的外观和感觉几乎相同。
您可以在代码中检查客户端大小并根据其内容加载不同的 CSS，也可以使用 CSS has for this 方法。