Many articles often advocate using EMs as a unit of measure for responsive web design.
But why? After building my first responsive web design, I don't see how EMs are useful at all.
In theory, using Ems means that if you drop the font size, the layout will shrink accordingly.
However, in practice, when creating a responsive design, you have to redefine the values of the layout for smaller screen sizes anyway*, so using EMs doesn't really bring any benefit.
A particular disadvantage of using EMs is that the size of an EM is relative to the parent element. This means if you have a design which has several nested elements, it can become very tricky to keep track of what the actual size of an element is. REMs (relative ems) are a solution to this, but they don't work in IE6-8.
When building my first responsive design, I used Sass to perform the EM calculations. That way, I could work in pixels and then output everything as EMs. However, this wasn't a perfect solution, as when debugging with Firebug, all the values were displayed in EMs, which made debugging cumbersome (compared to using pixels).
In short, I can't see what the benefits of EMs are. I am tempted to stick to pixels and percentages for my next project (using pixels for fonts and a combinations of pixels and percentages for layout).
Because so many articles recommend using EMs, I think the problem is probably with me failing to understand them.
So, I would greatly appreciate it if someone could give me some pointers about EMs so I could better understand them.
*For example, if you have a 12 column grid on a desktop design, you are going to have to re-design it to a 2 column layout on a mobile version.
Just dropping the font size is not going to work, as you could never get a 12 column grid to fit on a mobile screen.
(PS I am aware that EMs are useful if the reader want to increase the font size, as the layout will increase in size. However, most browsers come with a zoom feature which makes this benefit less compelling).