If the font size of the body is%, is it useful to use them for all things, in some places you should use the font width, field registration or%?

Question

I am doing Fluid + responsive layout where the layout is scaled up and down to fit the browser / screen.

If I use font-size of body as a percentage of % , then it is useful to use em for all things,

• font-size
• width
• margin
• padding
• border-width
• border-radius

Or should I use em only for font-size ?

My goal is to keep everything in proportion when things expand and fall.

I am a little confused when to use em and when % . My body font-size is 62.5%

Answer 1

Using em was considered good practice for accessibility before each browser supported scaling. Now, I have found that it is mostly useful for simply declaring relative font sizes in certain scenarios (maybe yours).

I found that the relative size does not give aesthetically pleasing results at the borders, because some browsers will try to literally use the floating point value obtained from the calculation of em or percent, and the result will be fuzzy (try).

I use interest in most of my layouts. I found that several common percent based types can cover many layout requirements (e.g. 50/50, 33/67, 25/75 separation style, etc.).

I personally find that interest is more intuitive. An element with a width of 100% will always occupy 100% of its parent (of course, with the correct window size), and it is easy to read in code. An element that has a width of 15 m can be 50% or 150% of its parent; this is not directly obvious, and it’s hard for me to track (but maybe it's just me).

Here are some basic styles. They have not been tested on all possible browsers / devices, 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; } 

Answer 2

for my projects, I do this:

• The default browser font size is 16 pixels.
• html { font-size:100.01%;} . 0.01% reduces rounding errors. general "rounding" to solve the case when resizing makes the text very small at times
• With this tool: http://pxtoem.com/ you can easily convert px to ems without a hitch.
• so if I set body {font-size: 75%;} , the font size is 12 pixels, since 75% of 16 is 12.

px is best used for general page layout, such as page sections, margins, indents. a problem with px, especially in a browser such as IE6, which has "minimal, smaller, normal, large and large" text scaling, pixel unit fonts do not change. however, when full page scaling appears, we do not need this text scaling. pages, content and text, unlike the old days.

ems is best used to fill in text fields as well as the font size of the text. in case of scaling IE text, ems DO resizes in response to this.

percent? I do not use them or rarely in some cases.