GWT and CSS3 Media queries

HomeView.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:with field="res" type="com.project.client.resource.Resources"/>
    
    <g:HTMLPanel>
        <div class="{res.styles.mainContent} {res.mobileStyles.mainContent}">
            Some content
        </div>
    </g:HTMLPanel>
</ui:UiBinder>

Resources.java

public interface Resources extends ClientBundle {
    public interface Styles extends CssResource {
        String mainContent();
    }

    public interface MobileStyles extends CssResource {
        String mainContent();
    }

    public Styles styles();

    public MobileStyles mobileStyles();
}

ResourcesLoader.java

public class ResourcesLoader {
    private static final int MOBILE_MAX_WIDTH = 700;
    private static final String MOBILE_MEDIA = "@media only screen and (max-width: " + MOBILE_MAX_WIDTH + "px), " +
            "only screen and (max-device-width: " + MOBILE_MAX_WIDTH + "px) {";
    private static final String CLOSING_BRACKET = "}";

    @Inject
    ResourcesLoader(Resources resources) {
        resources.styles().ensureInjected();
        
        injectMediaCss(resources);
    }

    private void injectMediaCss(Resources resources) {
        injectMobileStylesheet(resources.mobileStyles());
    }

    private void injectMobileStylesheet(CssResource cssResource) {
        String mobileCss = wrapMobileStylesheet(cssResource.getText());
        StyleInjector.injectAtEnd(mobileCss);
    }

    private String wrapMobileStylesheet(String content) {
        return MOBILE_MEDIA + content + CLOSING_BRACKET;
    }
}