4

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

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

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

body {background-color:green;}

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

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

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

4

4 回答 4

4

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

  • 在您的客户端捆绑接口中，将您的源 css 标记为 TextResource：

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

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

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

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

于 2013-04-05T15:13:58.657 回答
4

GWT 2.5.1 添加了对CSS2 @media 规则（例如@media print { /* ... */ }）的支持。但是，尚不支持 CSS3 @media 规则；那是问题 8162 - CSSResource 和 CSS3。

Bart Guijt 建议的一个很好的解决方法是将“仅屏幕和（最大宽度：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() +
        "}");

这类似于user1311201 建议的解决方法TextResource，但有一个额外的好处，您可以使用混淆的 CSS 类名和其他功能。CssResource

于 2014-01-07T12:45:42.457 回答
3

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

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

body {background-color:BG_COLOR;}
于 2013-11-06T09:38:44.070 回答
1

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

我的回答与 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();
于 2017-07-19T11:22:20.713 回答