GWT CssResource 和使用@media 来支持大屏幕和小屏幕答案

【问题标题】：GWT CssResource and using @media to support both large and small screensGWT CssResource 和使用@media 来支持大屏幕和小屏幕
【发布时间】：2012-11-05 17:57:52
【问题描述】：

我正在使用 GWT 的 ClientBundle 和 CssResource 来提取我的 css 定义。

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

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

body {background-color:green;}

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

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

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

【问题讨论】：

标签： iphone css gwt desktop cssresource

【解决方案1】：

如果有一点改变，您也可以使用@eval 来作为解决方法，如下所示

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

body {background-color:BG_COLOR;}

【讨论】：

将此标记为最佳答案，因为它不影响 MyCss/UiBinder 的使用。

【解决方案2】：

我知道自从第一次提出问题以来有点晚了，但我最近遇到了同样的问题。

我的回答与 Daniel Trebbien 建议的类似，但略有不同。

我在这个部分的主类中做所有事情，因为我在同一个项目中有几个部分。

首先，初始化变量：

    private final CssResource style;
    private final TextResource mobile;

在资源类中，在主类中：

    @Source("main.css")
    CssResource style();

    @Source("mobile.css")
    TextResource mobile();

在资源类之外，但在主类中：

 private void scheduleFinally() {
        StyleInjector.injectAtEnd("@media screen and (max-width:900px) {" +
                this.resources.mobile().getText() +
            "}");
    }

然后，我有点“初始化”这两个 css：

    this.style = this.resources.style();
    this.style.ensureInjected();

    this.mobile = this.resources.mobile();
    scheduleFinally();

【讨论】：

【解决方案3】：

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

在您的客户端捆绑界面中，将您的源 css 标记为 TextResource：

@Source("mycss.css") 文本资源 myCss();
转到您的 entryPoint 类并注入您的资源：

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

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

【讨论】：

【解决方案4】：

对CSS2 @media rules（例如@media print { /* ... */ }）的支持是added to GWT 2.5.1。但是，尚不支持 CSS3 @media 规则；那是Issue 8162 - CSSResource and CSS3。

suggested by Bart Guijt 的一个很好的解决方法是将“仅屏幕和 (max-width:480px)”CSS 放入单独的文件中，并在 @media 规则中动态注入生成的 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() +
        "}");

这类似于TextResource 变通方法suggested by user1311201，但还有一个额外的好处是您可以使用混淆的CSS 类名和其他CssResource 功能。

【讨论】：