GWT：在主机页中加载不同的css

我有基于GWTP的gwt应用程序。该应用程序支持两个版本（平板电脑和桌面），并使用不同的小部件库（sencha gxt和sencha touch）。这些库在主机页中需要不同的css文件。更多其他css相互冲突。如何在主机页中加载不同的css文件

---

我已经读过了，但是它们使用单个html页面和不同的组件实现。

您可以检查Useragent并决定交付哪个CSS文件

我建议使用。这只提供css样式所需，并加快页面速度

在入口点中，您只需决定要交付的css文件：

if(useragent == "desktop") {
   YourStyle.getTheme().getMGWTClientBundle().getDesktopCss().ensureInjected();
} else {
   YourStyle.getTheme().getMGWTClientBundle().getAppCss().ensureInjected();
}

或者你也可以做一个。但无论如何，您必须使用ClientBundles

在那里，您可以有如下内容：

@external gwt-button;
@if user.agent safari {
    .gwt-Button {
        ...
    }
}

---

@外部gwt按钮用于避免混淆错误。您也可以使用@external*

您也可以在服务器端通过使用JSP文件作为css源来实现这一点。 然后，在JSP文件中，根据请求的用户代理或其他代理决定要发送的属性集

另一个选项是将主机页编写为JSP文件，它可以根据请求包含适当的CSS文件。

---

这是一种非常简单的方法，但是必须在web.xml中启用JSP处理器。它还要求您部署的系统上有java编译器，如果您只在Web服务器上安装JRE，则情况并非如此。

您必须创建两个类来加载css文件：

您可以在gwt.xml文件中执行一些与类型相关的操作

<replace-with
    class="com.test.classMobile">
    <when-type-is
        class="com.Test.classBrowser" />
    <when-property-is name="tablet.user.agent" value="ipad" />
</replace-with>  

---

试试看……我不确定这种方法100%会导致css解析和混淆的错误。所以这是不合适的。你必须正确使用CssResource，这只是一个片段。如果您想了解更多关于CssResource的信息，请阅读文档，但这是如何使用它的建议。在您的情况下，您可能不使用外部gwt按钮。或者只是外部的，没有混淆。为了清楚起见，我修改了代码。我们讨论两个库的css。这些样式相当复杂（有浏览器的技巧）。例如，看看GXT3中的reset.css。无法为每个css选择器添加@external。