iphonecssgwtdesktopcssresource

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

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.

Solution

  • If is a little change you may use as workaround too @eval as follows 

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

body {background-color:BG_COLOR;}