GWT CssResource and using @media to support both large and small screens

Question

I'm using GWT's ClientBundle and CssResource to pull in my css definitions.

I'd like to set viewports depending upon screen size. Do you know how to achieve this within CssResource?

My failed attempt... for ease of testing I've used background shades instead. But for all devices the background is green.

body {background-color:green;}

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

GWT [v2.5] Compiler kicks out a warning: [WARN] Line x column 12: encountered "screen". Was expecting one of: "{" ","

Just a warning but in this case it's not to be ignored.

Answer 1

GWT [v2.5] doesn't support media queries. If you want to use it you have to do a workaround:

• In your Client bundle interface mark your source css as TextResource:

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

• Go to your entryPoint class and inject your resource:

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

By doing this, you lose the interface MyCss that extends from CssResource and allows you to call the css class from the UIBinder, among other things. But, at least, you can use media queries.