0

Since i want to develop responsive websites i usually neglect px and use % for dimensions. But i discovered that some cases % doesnt work so i use em instead.
Why is it that in some cases % doesnt work but em does ?
Thx for help

3
Contributors
2
Replies
10
Views
2 Years
Discussion Span
Last Post by gentlemedia
0

In responsive websites normally we would use % for layout dimensions and em (or even rem units depending on your targeted browsers) for the fontsizes. em or rem is handy bacause it's easy to scale down or bump up fontsizes in elements relative to their parent(s). It's also recommended to set your media querries in em's instead of px.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

One of the best things to use in responsive web design is putting the following in your CSS reset.

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

This will override the default CSS box-modal (box-sizing: content-box) in the browsers, so that borders and paddings are calculated inside all elements instead of outside. This was for me really a life saver in RWD.

If you had 3 elements in a row equally set to 33.3333333333% width and you wanted a 1px border around them, then this would force the 3rd element to drop to the next line, but with box-sizing: border-box; you don't have this problem and will save you a lot of math and trouble.

Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.