I'm making Fluid + responsive layout where layout scale up and down on browser/screen re-size.
If I use font-size
of body
is in %
percentage then is it good to use em
for all things ,
font-size
width
margin
padding
border-width
border-radius
Or I should use em
only for font-size
?
My aim is to keep everything is in proportion when things scale up and down.
I'm little confused when I should use em
and when %
. My font-size
of body is 62.5%
Using em
used to be considered a good practice for accessibility before every browser supported zooming. Now I have found that it is mostly useful for easily declaring relative font sizes in specific scenarios (perhaps yours).
I've found that relative sizing does not yield aesthetically pleasing results on borders because some browsers will try to literally use a floating point value derived from the em
or percentage calculation and the result will be fuzzy (try it).
I use percentages heavily in most of my layouts. I've found that a couple of generic percentage based styles can cover a multitude of layout needs (such as a style for a 50/50 split, 33/67, 25/75, etc. etc.).
I personally find percentages more intuitive to deal with. An element with a width of 100% will always take up 100% of its parent (with the right box-sizing, of course) and it's easy to read that in your code. An element that is 15em wide might take up 50% or 150% of its parent; it's not directly obvious and I find it harder to keep track of (but maybe that's just me).
Here are a few baseline styles. These haven't been tested on every possible browser/device but they are used in production applications:
* {
border-style: none;
border-color: inherit;
border-width: 0;
padding: 0;
margin: 0;
vertical-align: baseline;
}
BODY {
font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;
color: #404040;
background-color: #fff;
}
H1 {
font-size: 1.8em;
margin: .1em 0 .1em 0;
color: #2B265B;
}
H2 {
font-size: 1.6em;
margin: 0 0 .25em 0;
color: #303030;
}
H3 {
font-size: 1.4em;
margin: 0 0 .25em 0;
color: #3b5998;
}
H4 {
font-size: 1.2em;
margin: 0 0 .1em 0;
color: #666;
}
P {
margin: 0 0 1.5em 0;
font-size: 1.1em;
}
INPUT, SELECT, TEXTAREA {
border-style: solid;
vertical-align: middle;
margin: .2em 0 .2em 0;
border-radius: .3em;
-moz-border-radius: .3em;
}
INPUT[type="text"], INPUT[type="password"]{
border-color: #85a3bf;
width: 16em;
padding: .2em;
border-width: 1px;
}
INPUT[type="file"] {
border-color: #85a3bf;
width: 32em;
padding: .2em;
border-width: 1px;
}
INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus {
border-color: #0066cc;
}
INPUT[type="submit"], INPUT[type="button"] {
border-color: #DDDDDD #BBBBBB #999999;
border-width: 1px;
background: #eee url([URL]) repeat-x;
padding: .2em .8em .2em .8em;
text-shadow: 1px 1px #fff;
}
INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
background: #eee url([URL]) repeat-x;
}
INPUT[type="submit"]:active, INPUT[type="button"]:active {
background: #eee url([URL]) repeat-x;
}
INPUT[type="checkbox"], INPUT[type="radio"] {
margin: 0px .5em .1em .5em;
vertical-align: middle;
}
INPUT[type="image"] {
border: 0;
margin: 0;
}
SELECT {
padding: .1em;
border-width: 1px;
border-color: #DDDDDD #BBBBBB #999999;
background: #eee url([URL]) repeat-x;
}
TEXTAREA {
border-width: 1px;
border-color: #85a3bf;
padding: .3em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
for my projects i do it this way:
html { font-size:100.01%;}
. the 0.01% reduces the errors of the rounding off. a general "round-up" to solve the case where resizing makes the text very small at timesbody {font-size: 75%;}
, the font size is 12px since 75% of 16 is 12.px is best used for general layouting of the page like sections of the pages, margins, padding. the problem with px is, especially in browser like IE6 that have te "smallest, smaller, normal, large, and larger" text scaling, px unit fonts don't resize. however, in the advent of full page zoom, we don't need this text scaling. pages zoom, content AND text unlike the old days.
ems are best used in padding and margins of text as well as the font size of the text. in the case of the IE text scaling, ems DO resize in response to that.
percent? i don't use them or rarely in some cases.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With