iphone - GWT CssResource 和使用@media 支持大屏幕和小屏幕

Question

我正在使用 GWT 的 ClientBundle 和 CssResource 来引入我的 css 定义。

我想根据屏幕尺寸设置视口(viewport)。你知道如何在 CssResource 中实现这一点吗？

我失败的尝试...为了便于测试，我使用了背景色。但对于所有设备，背景都是绿色的。

body {background-color:green;}

@media only screen and (max-width:480px) {
body {background-color:red;}
}

GWT [v2.5] 编译器发出警告:[WARN] 第 x 行第 12 列:遇到“屏幕”。期待其中之一:“{”“，”

只是一个警告，但在这种情况下不容忽视。

Answer 1

GWT [v2.5] 不支持媒体查询。如果你想使用它，你必须做一个解决方法:

• 在您的客户端包界面中将您的源 css 标记为 TextResource:

  @Source("mycss.css")TextResource myCss();

• 转到您的 entryPoint 类并注入(inject)您的资源:

  StyleInjector.inject(AppBundle.INSTANCE.carouselCss().getText());

通过这样做，您失去了从 CssResource 扩展的接口(interface) MyCss 并允许您从 UIBinder 调用 css 类，等等。但是，至少，您可以使用媒体查询。