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
4
-
Go % for everything, with only your main panel wrapper on desktop having a max width in pixels.– JohnCommented Mar 26, 2014 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.– DA01Commented Mar 26, 2014 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.– ckpepper02Commented Mar 26, 2014 at 19:08
-
1Although 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 GilbertsonCommented Mar 26, 2014 at 20:59
Add a comment
|
2 Answers
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.
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
