jquery mobile theme scaling

I'm looking for the best aproach how to scale theme(read headers, footer, inputs etc) using jquery mobile,

let's say I have this header which's height is about 90px, it's gonna look great on iphone4, it's gonna look somewhat fine on my galaxy s, but it's gonna be ridiculously huge on 3g/3gs and android phones with lower resolution.

I could probably use media queries, but that would be like coding the whole thing countless times to make it look properly on every majorly used resolution, considering I'd have to manually set height for every single possible element and content I'll add..

or I could just leave it as it is on http://jquerymobile.com/demos/1.0b2/docs/pages/page-template.html but considering I'm not using just gradients, but actuall graphics, that were designed for iphone4 resolution(that 90px 开发者_Go百科header), it's not gonna look good, scaled down so much

or I could be probably using ems but that's not exactly realiable, nor are percents..

Is there any other way? Some best practice perhaps? App's design down below. Thanks in advance.

for iphone 4/4s images place @2x behind your image, iphone 4 will detect these images automaticly, for iphone 3g/3gs make images that are smaller. Example u have a image for iphone 4 its 100 x 100px u name it: image1@2x.png, for iphone 3gs u make it 50 x 50 and just name it image1.png. If u design in photoshop always use shape layers. so u can scale up down. hope this helps.