1

For responsive designs, I use em values instead of px. (Of course, % also comes into play.)

However, when considering containers of fluid photos (e.g. div, figure, etc.), layouts sometimes call that it has a max-width property in the CSS.

If this was declared in em (e.g. 700px/16px = 43.75em), then it could resize incorrectly depending on a user's browser settings and zoom.

Therefore, it seems that px values in CSS declarations are better-suited? But I am wary of using them now... alternatively, however, is such a precaution unfounded?

Baumr
  • 6,124
  • 14
  • 37
  • 63
  • Surely if you set `img { max-width: 100% }` then if the container gets bigger than the image, the image stops growing? Also, if users change their zoom settings, wouldn't they expect the images to zoom too? Or am I misunderstanding the problem? Additionally, you'd need to test, but I *think* only IE adheres to pixels sizes when you change the text size setting. Others scale text accordingly. – Olly Hodgson Dec 04 '12 at 14:47
  • Right, but in this case we'd want the container to stop growing bigger than the image. Should I adjust the question? – Baumr Dec 04 '12 at 14:49

1 Answers1

2

I'd say set it in em, but accept that users can (and will) zoom in/out and/or change their base font size. That's just some things you can't control.

The best thing though, would be to set up some simple test cases and try it across a number of browsers / zoom / text-size settings.

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • I'd say that too, but, for example in the case of a [container with an image and caption](http://stackoverflow.com/questions/13705616/how-to-get-img-to-be-the-same-width-as-figcaption), em values could stir up a mess where the image and caption would be mismatched with a non-16px base font size. I am sure there are other similar cases (hence why I asked this question broader than just that) – Baumr Dec 04 '12 at 14:54
  • I see what you mean. In that case, you'd probably want to use CSS which makes the figure into a `shrink-to-fit` element, e.g. `float` or `inline-block`. Alas neither are perfect solutions. – Olly Hodgson Dec 04 '12 at 15:10
  • But I guess you're right, for non image solutions, `em` will be better where it's not possible to use `%`, marking as solved unless someone has any other suggestions :) – Baumr Dec 04 '12 at 21:17