2

Which is better experience in responsive design..

To create all containers with % and em units OR use pixels for main containers and % for content (adaptive)?

Thanks

  • Go % for everything, with only your main panel wrapper on desktop having a max width in pixels. – John Mar 26 '14 at 14:04
  • What is a main container vs content? This question is a bit vague and not really answerable as context is really important. – DA01 Mar 26 '14 at 15:15
  • This question appears to be off-topic because it is about coding for responsive design, not designing for responsive layouts. This would be better suited for Stack Overflow. – ckpepper02 Mar 26 '14 at 19:08
  • 1
    Although it involves choices of markup, the question is an important one in terms of achieving the best final design result, so I would consider it within our scope. – Alan Gilbertson Mar 26 '14 at 20:59
1

Structuring the site using % for containers will provide maximum flexibility across devices. You can always utilise min-width and max-width properties to add any restrictions. Often very useful in large displays.

1

I don't really see a need to choose one or the other. EMs are good for most font related applications like font-size, line-height etc. I use them for stuff like border-radius, box-shadow so those elements will scale up too. Percentages are usually good for applying width, margin and padding to boxes. Things like border you can't apply a percentage width, but you can use an em width. You should really use them in tandem. The goal is to make everything scalable on your site and to not use fixed width elements, so there really isn't a need to pick a side in this instance.

As Dominic mentioned using EMs they are always affected by the parent container. If you're targeting IE9 and later then you can get away with using REM units, which are Relative EMs, so they aren't affected by the size of the parent container. For more info on REM compatibility check http://caniuse.com/rem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.