问题
I'm know we all probably used before 62.5% as font body size, we used this for old IE versions to do correct scaling on zoom.
So i'm understand why it is this value, and how it deals with "em". What i'm don't understand is why peoples still use it? Especially when they have design which anyway not respect user font settings.
I'm not have anything against it when it used clever way, like those one site good example http://www.polarfoundation.org/ it fully respect user font settings and adjust display to it, so here is it absolutelly needed and all fine.
And here is opposite example http://froont.com/ it has nothing with respect of user font settings, so if user for example have extra large font in browser defaults their design simply become broken. So if they anyway make design based on magic value of "62.5%" which is "10px" and count all other values from that point why not simply put "10px" instead of "62.5" this way design not become broken and nowadays all browsers can handle zoom of "px" without any problem.
So questions is:
Do i'm missing some?
Is there real reason still use "62.5%" instead of "10px"?
Is there some benefits use "62.5%" instead of "10px" even if design get broken(according to example)?
Because as on example above i'm feels dumb in understanding why they do that if it not work correct.
UPDATE 1:
It not related to font-size:62.5% vs. font-size:10px. I'm know so 62.5% equal to 10px in many points, and know in what different and i'm not about IE behavior for which it related. Besides i'm interesting why it used when no need.
Please read question before comment.
1) It not related to scaling, look on 2nd example, it used as a magic point to 10px, and it especially broke everything on scaling
2) It not related to golden rule, 62.5% used to get base font of 10px for easy math
UPDATE 2:
Here is images of both examples on different default browser font size. I'm hope they explain more what i'm mean.
Good example normal default font size(16px):
Good example large default font size:
In this one example all fine, they non use magic value but fully respect default browser font, so everything alright even when font changes.
Bad example normal default font size(16px):
Bad example large default font size:
And this is where everything goes wrong, cos they used "62.5%" in assume it to become "10px". But if they only used it as is "10px" all still be fine, so why they and many others still use "62.5%" even without thinking?
回答1:
Developers use it to make it simple for them to design. The default font size is 16px, so they set the body font size to 62.5%. Therefore:
Body font-size = (62.5/100)*16 = 10px
Now as human beings, we find it very easy to use the decimal system. It's also easy to understand fractions in terms of 10, so responsive designing becomes easier!
By the way, i recommend you use font-size: 10px; explicitly in the body, as all browser default font-size might not be 16px.
Hope I am helpful :)
回答2:
The short answer:
62.5% is equal to 10px in most browsers, so it makes it easier to calculate REM units.
The main reason I don't declare html { font-size: 10px; is that if a visually impaired user has reset their base browser size (up or down), I want to respect that, so I want my site's typography to scale proportionally to his default browser settings.
The long answer:
10px is a ridiculously small font size. However, it has some utility if you apply it judiciously.
By resetting the root (HTML) font to 62.5%, I can calculate all of my REM units with that magical 1rem = 10px formula
Then, I reset body back to my default font size using EMs (body { font-size: 1.6em }, proportinal to the 62.5% number, it's now easy to see that's 16 px)
From there, all the units can be declared as em or REM units, proportional to the root font size.
回答3:
After a few days of digging, asking friends and looking i'm get to next conclusions on this:
1) Some developers use this solution without knowing how this works
2) Some of them use this as part of some other framework, and still they non know how it works, neither probably looked on guidelines
3) Some of them planned to go with flexible design but forgot about that and left this thing as is
So it like this.
来源：https://stackoverflow.com/questions/28988445/css-62-5-why-do-developers-use-it