The correspondence between pixels and screen pixels break down when the dpi is nuts, which is why 1 px (css) = 2px (screen) on the retina screen of the iPhone 4.
You can't avoid pixels in CSS. Yet.
A CSS pixel is ALWAYS the exact same thing as a screen pixel, unless:
1. The browser's view has been "zoomed". This can occur on desktop browsers or mobile browsers, although it's much more common on mobile browsers.
2. You are on a quad-pixel display like an iPhone 4. In this case, 1 CSS pixel = 4 real pixels, exactly.
Options 1 and 2 rarely breaks anything due to a use of "px". Those situations that are problematic usually are due to a design flaw in your CSS (and will not be fixed by switching to "pt").
Option 2 will never break your CSS. The only time it matters is if you want to serve double-resolution images [1]. Other than that, you have no access to the super-grid, so don't worry.
[1] http://www.sitepoint.com/razor-sharp-images-in-mobile-safari...
Not true. You should reread the article, if you care to, and perhaps check the sources. Even if what you were saying was true do you think it makes sense to define things at the native resolution of a monitor? :Faceplam: