问题
I'm going after a layout that would scale nicely along with zoom (user pressing ctr/cmd + [plus]). For that I need dimensions to scale along with font-size. Using em units is too tricky, so I'm thinking of going with rem (and duplicating every dimensional property for old ie).
My initial idea was to set font-size on html element to 10px and then use 1/10rem as a pixel replacement. But since font-size on body is set arbitrary in px, the one on html would be used exclusively for rem measurement. So why not set it to 1px?
The advantages are obvious - ease of writing duplicated declarations and maintainability.
As for disadvantages (apart form duplicating declarations) I can't think of any. But maybe I'm missing something. Are there any pitfalls in this approach?
回答1:
As you would still need to do things some other way for IE, as you say, I don’t see any possible benefit in the approach. Just use em, even if it requires some computations. If you have deeply nested elements with their own font-size settings, it’s all too complicated anyway and needs simplification, not complication.
Setting font-size: 1px is highly unnatural and would make your stylesheet hard to read and maintain.
回答2:
Since you've defined an inheritable font-size in your body, you're safe to change the html font-size as you see fit. Currently, this only affects rem values, but if something else utilizes this value, then this 1px nonstandard config will break something else and be difficult to fix.
This may have an impact on 3rd party libraries utilizing rem, and some confusion may come from using em and rem interchangeably.
Personally I think, if working with vanilla CSS (sans preprocessor), using this nonstandard method greatly simplifies the use of rem as 1:1 rem:px values are extremely intuitive.
来源：https://stackoverflow.com/questions/8519545/font-size-1px-to-use-with-rem-units