Question

我正在使用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行：遇到“屏幕”。期待以下之一：“{”“，”

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

Answer 1

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

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

@Source（ “mycss.css”） TextResource myCss（）;
转到您的entryPoint类并注入您的资源：
（AppBundle.INSTANCE.carouselCss（）的getText（））
StyleInjector.inject;

通过执行此操作，您将丢失从CssResource扩展的接口MyCss，并允许您从UIBinder调用css类等。但是，至少，您可以使用媒体查询。

Answer 2

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

一个很好的解决方法suggested by Bart Guijt是将“only screen and（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功能。

Answer 3

如果稍有变化，您可以使用@eval作为解决方法，如下所示

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

body {background-color:BG_COLOR;}

Answer 4

我知道这个问题是第一次被问到有点晚了，但最近我遇到了同样的问题。

我的答案与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();

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

4 个答案: