Pixels and percents. I know some love ems and rems, but I’ve never had an issue with pixels and percents.

CSS pixels are an abstracted measurement unit, just one that also correlates to the display’s pixels (but not always 1:1). They’re awesome.

Just remember to use box-sizing: border-box and all will be good.

Started using Rem from em. So far so good. If you give html font size 62.5%. More fun.

Eg:

html { font-size:62.5%; }

.element { font-size:18px; font-size:1.8rem; }

.element2 { font-size:24px; font-size:2.4rem; }

You don't need a calculator. :-)

I use cm and in indiscriminately.

Punk Rock Web Development.

ems are incredibly useful for media queries; now that support for rem is good, I use them for typography. Everything else, I tend to go with percentages; avoiding setting heights and widths on elements is a good practice anyway! :)

I love integers so I'm fine with pixels and percentages. However, for some font-related properties like line-height, I usually use em

That is great.

While the nesting of em is a pain in the ass I'm using rem for relative statements. Though for shadows, borders and the like I'm still using px. There is no right or wrong, anyone should use what leads to the best results (from a users pov) and what fits best in their workflow/grid.

px

I use all of them as they all have their uses:

I use px on my html element to set a base font-size which increases (slightly) on larger displays.

I use ems to size text so it scales as it's parents change via media queries.

I use rems for consistent padding and margins (I use a Grunt task for rem fallbacks for IE).

I use percents for column widths and sometimes for positioning items absolutely.

I will admit that for fixed lengths, I tend to use rems with a px fallback, but it's ultimately down to context. The important thing is understanding what px, rem, em, percentage, and vw/vh actually mean.

This will allow you to make judgements on the best unit for the piece of CSS you're writing at that precise time.

For instance, a piece of decoration that needs to scale to sit comfortably on a <p> or an <h1> could inherit it's spacing based on the type size - so use ems.

You may have a layout where the items will need to have a fixed width padding (rem/px) whilst having 25% width of their container.

Etc, etc.

I like to use rems, but I prefer to think in pixels, if that makes sense. I usually have a converter function in Sass that I'll use.

px and % for everything but font-size and line-height. For those I use ems.

I use sass mixins that output REMs and PX for fall backs. I find this pretty useful for scaling UI by adjusting HTML font-size.

rems

I use rem with a px fallback for most things, and vw for aligning to my columns.

Recently ran into this on a project and the final verdict was: pixels/percentages. I'd been using em's throughout the entire project and it was producing values that were slightly off (I was doing a Sketch -> Front-End conversion). In the end, the results were more-or-less the same and code management was much easier.

I prefer to use rem for its ease of scaling – for responsive work I'm usually able to do a global adjustment and fine tune just a few rules.

However, I still often find myself stuck in IE8 compatibility hell, and polyfilling rems is too performance intensive for production. So, in those cases, I to stick to px. Ems are useful sometimes, but generally I find CSS easier to wield, without the relativity of em.

One important thing when using em/rem for text is to make sure that fixed-size elements containing text are set with em/rem as well to prevent text from disappearing/overflowing when a device changes the baseline.

I see this alot.

Em/rem is not only for text-size but everything dependent on it.

Sassline + Rems. Fastest path to good type and space.

Set the root percent and use rems all the way down. Best part: you can change the size of all elements proportionally by only changing the root percent.

For instance, my personal site resizes perfectly with only these rules:

@media screen and (max-width: 1024px) {

@media screen and (max-width: 960px) {

I've used ems in the past, but its not a good idea as things can get complicated when thinking about context.

I believe I was told by CSS Wizardry that using rem with px fallbacks is the best approach, and I would say he's right as I'm sure he's tested several units and methods.

The projects I work on now use px though, we need to so that we are sure we're getting the right units.

rems are really good for vertical rhythm and they allow you to better integrate typography with everything else (instead of always multiplying your font size or line height in pixels).

I use em's mostly. It's probably a lesser used thing but I like the fact when you zoom in it shows the appropriate view based on your media queries.

You can scale the font-size from the body element so you can serve appropriate font sizes easier.

I like the idea of rems but I only use them where consistency is needed with margins/padding. I don't have any trouble with nesting ems and getting caught off guard with font sizes. I also don't like the pixel fallback thing.

I use em for typography and rems for components.

I use ems for everything including media queries. The only exception is if I don't want something to scale (such as bitmap).

I use REMs for modern browsers, EMs for older ones. I prefer to design with proportions rather than pixel-perfect measurements. But then, I tend to design in the browser rather than churning out static comps. I suspect the PX/% : EM/REM issue will divide along similar lines.

Fuss? The beauty is that em and rem scale with the parent or root font-size relatively, whereas pixels don't.

If you build a component with scalable units (not pixels) you can have a small, medium and large version with the same code just by changing the base font-size. Not possible with pixels.

A few thoughts here http://codesandnotes.com/scaling-components/ and here http://codesandnotes.com/modern-css-sizing-advice/