what units do you use for css for mobile web apps?

Question

px? em? pt? seems like with varying device sizes and densities it's getting to be time to use something absolute like pts. Can anyone point me to a good, recent write-up of what to use when?

(I'm specifically targeting webkit-based mobile devices as my primary platform, though the site needs to work on large monitors, as well. I'm fine ignoring IE and older browsers for the most part.)

Answer 1

As you say with high density phones you should avoid px but also pt that originally was for printing. As you setup your site to comply with most browsers, mobile or not, set your body font-size using percentage (historically better support I say without source) and then use em through your document. This allow your users to set their preferred font-size in their (mobile phones) browser settings and let you keep your relations between your different font-sizes.

Answer 2

Check out this and that from Luke Wroblewski. Googling his name will find more.

Answer 3

As a web developer, I stick to pixels because this is already a standard for all digital display devices. Most mobile phones now come in screens based on pixels, and phones are able to resize to fit your content.

You simply have to make sure that you minimize the amount of content on each page for fast loading and rendering.

Answer 4

I think that you are best designing multiple CSS style sheets for browser window sizes,

Aside from that the best method in my mind is percentages - that way the content is always relative to the screen it is being viewed on. And then use em for font-sizes which is similar in the way it works to the way percentage works for layout sizes.