Shouldn't we use "Pixel" for anything in CSS, if we are making a site for mobile devices?

Question

Shouldn't we use "Pixel" for anything in CSS if we are making a site for mobile devices?

px for layout and font. Should we only use em or % for everything on mobile sites?

and if i'm using <img> then should i defined height and width for <img> in HTML code? or it's good to not to define. or i should define size in css for <img> also in % or em

Edit:

Note: Question is not again about px vs em debate My question is specifically for separate mobile site. when we are making separate mobile site with different domain or sub-domain.

Answer 1

Everything depends on the context. Like with CSS for desktop browsers, there are situations where using pixels is not a good idea (for example mostly for font sizes), and there are situations where pixels are still very useful (for example fixed layout).

In general, avoid using pixels every-time you don't need to. For example, there is no reason to do it for fonts: it's not you, but the user who chooses if the font must be big on a high-res screen or not. Using percentages also helps you somehow to remember that a piece of text can never have an exact width and height, and force you to adapt your design.

Now, sometimes, for cost or other reasons, you have to do fixed layouts, or at least some parts of a page, associating images and text, have to be fixed in size. In this case, there is nothing wrong to use pixels. If I have a <div/> with some text inside and a pretty 200×100px background, the most obvious thing is to set the width and the height of this <div/> to 200 and 100 pixels.

if i'm using <img> then should i defined height and width for <img> in HTML code?

IMHO, you never should do that. The size of an image is purely a layout/design thing, so it has nothing to do with HTML, but with CSS.

Do you have to specify the size of an image in CSS? If you want your image to be displayed 100%, than no, you don't have to: this is by default in every browser. If you want to scale it down and, for some reasons, you can't scale the image itself than save the scaled image on server, than yes, you may want to specify the size of the image.

Remember than sending a big image and scale is down on client side is always a bad idea. The visual quality might be affected, and the client will have to wait more to see the image appear.

Answer 2

Actually, I recommend using different CSS files (and sometimes different templates) for browsers vs. mobile. Mobile isn't just a smaller browser, it is a fundamentally different user experience.

As for the pixel issue, I tend to use pixels in my base CSS rules and then use % or em's everywhere else so that things scale up and down together. It doesn't always work the way I would like, but it normally allows a lot of tweaking during development.