问GWT和使用@ CssResource支持大屏幕和小屏幕

EN

如果这是一个小小的改变，你可以使用@eval作为变通方法，如下所示

@eval BG_COLOR com.google.gwt.user.client.Window.getClientWidth()<480?"red":"green";  

body {background-color:BG_COLOR;}

GWT v2.5不支持媒体查询。如果你想使用它，你必须做一个变通方法：

客户端捆绑包界面中的

• 将源css标记为TextResource：

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

• 转到您的entryPoint类并注入您的资源：

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

这样做，您将失去从CssResource扩展的接口MyCss，该接口允许您从UIBinder调用css类，等等。但是，至少你可以使用媒体查询。

对CSS2 @media rules (例如@media print { /* ... */ })的支持是added to GWT 2.5.1。但是，目前还不支持CSS3 @media规则；这就是Issue 8162 - CSSResource and CSS3。

一个不错的变通方法是将“唯一的屏幕和(max-width:480px)”CSS放入一个单独的文件中，并在@ suggested by Bart Guijt规则中动态地注入生成的CSS文本。

如果您有：

public interface MyResources extends ClientBundle {
    @Source("my.css")
    public MyCssResource desktopCss();

    @Source("my-mobile.css")
    public MyCssResource mobileCss();
}

然后在您的EntryPoint中添加：

final MyResources resources = GWT.create(MyResources.class);
StyleInjector.injectAtEnd("@media only screen and (max-width:480px) {" +
            resources.mobileCss().getText() +
        "}");

这与解决suggested by user1311201的TextResource变通方法类似，但是增加了一个好处，即您可以使用混淆的CSS类名和其他CssResource特性。