1 定义root html node的font-size，使用px或者rem；

2 使用rem定义元素font-size, 绝大部分情况禁止使用em定义font-size。em等同于当前元素的font-size，如果没有定义font-size，则继承父元素。所以em作为font-size,容易产生不确定的结果，但是em能很好控制一个范围内的比例，所以产生第3点结论

3 margin, padding, width, height，使用em

这样仅仅通过设置html 的font-size， 通过层层传递，html > componet font-size -> component maring/padding/width/height，就可以伸缩整个页面；另外可以单独设置某个component的em, 对某个component做单独的伸缩。

4 多列布局使用flex/ 百分比/vw，不使用rem。因为用rem/em不能保证多个列总和是稳定的。

5 不需要伸缩的，该用px的还是用px。

原文

Comprehensive Guide: When to Use Em vs. Rem​webdesign.tutsplus.com

Practical Application

There may be some debate among web designers and I’m sure different people have different preferred approaches, however my recommendation is as follows.

Use em Units For:

Any sizing that should scale depending on the font-size of an element other than the root.

Generally speaking, the only reason you’ll need to use em units is to scale an element which has non default font sizing.

As per our example above, design components like menu items, buttons, and headings may have their own explicitly stated font sizes. If you change these font sizes, you want the entire component to scale proportionately.

Common properties this guideline will apply to are margin, padding, width, height and line-height settings, when used on elements with non default font sizing.

I recommend that when you do employ em units, the font size of the element they’re used on should be set in rem units to preserve scalability but avoid inheritance confusion.

Typically Don’t Use em Units for Font Sizes

It’s quite common to see em units used for font sizing, particularly in headings, however I would suggest that designs are more manageable if rem units are typically used for font sizing.

The reason headings often use em units is they’re a better choice than px units, being relative to regular text size. However rem units can achieve this goal equally well. If any font size adjustment on the html element is made, the heading sizes will still scale too.

More often than not, we don’t want our font sizes to scale based on any element other than the root, with only a few exceptions.

One example where we might want em based font sizing could be a drop down menu, where we have second level menu item text sized depending on the font size of the first level. Another example might be a font icon used inside a button, where the icon’s size should relate to the button’s text size.

However most elements in a web design will tend not to have this type of requirement, so you’ll generally want to use rem units for font sizing, with em units only where specifically needed.

Use rem units for:

Any sizing that doesn’t need em units for the reasons described above, and that should scale depending on browser font size settings.

This accounts for almost everything in a standard design including most heights, most widths, most padding, most margins, border widths, most font sizes, shadows, basically almost every part of your layout.

In a nutshell, everything that can be made scalable with rem units, should be.

Tip

When creating layouts it’s often easier to think in pixels but output in rem units.

You can have pixel to rem calculations done automatically via a preprocessor like Stylus / Sass / Less, or a postprocessor like PostCSS with the PXtoRem plugin.

Alternatively, you can use PXtoEM to manually do your conversions.

Always Use rem Media Queries

Importantly, when using rem units to create a uniformly scalable design, your media queries should also be in rem units. This will ensure that whatever a user’s browser font size, your media queries will respond to it and adjust your layout.

For example, if a user scales up text very high, your layout may need to snap down from a two columns to a single column, just as it might on a smaller screened mobile device.

If your breakpoints are at fixed pixel widths, only a different viewport size can trigger them. However with rem based breakpoints they will respond to different font sizing too.

Don’t Use em or rem For:

Multi Column Layout Widths

Column widths in a layout should typically be % based so they can fluidly fit unpredictably sized viewports.

However single columns should still generally incorporate rem values via a max-width setting.

For example:

css .container { width: 100%; max-width: 75rem; }

This keeps the column flexible and scalable, but prevents it from becoming too wide for the text therein to be comfortably readable.

When an Element Should be Strictly Unscalable

In a typical web design there won’t be many parts of your layout that can’t be designed for scalability. However occasionally you will come across elements that really do need to use explicit fixed values for the purpose of preventing scaling.

The precondition for employing fixed sizing values should be that if the element in question were scaled it would break. This really doesn’t come up often, so before you’re tempted to whip out those px units, ask yourself if using them is an absolute necessity.

Wrapping Up

Let’s have a quick bullet point recap of what we’ve covered:

• rem and em units are computed into pixel values by the browser, based on font sizes in your design.
• em units are based on the font size of the element they’re used on.
• rem units are based on the font size of the html element.
• em units can be influenced by font size inheritance from any parent element
• rem units can be influenced by font size inheritance from browser font settings.
• Use em units for sizing that should scale depending on the font size of an element other than the root.
• Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.
• Use rem units unless you’re sure you need em units, including on font sizes.
• Use rem units on media queries
• Don’t use em or rem in multi column layout widths - use % instead.
• Don’t use em or rem if scaling would unavoidably cause a layout element to break.

I hope you’ve now built a robust and complete picture of exactly how em and rem units work, and through that know how to best leverage them in your designs.

I encourage you to try the usage guidelines contained in this tutorial for yourself, and enjoy the fully fledged scalability and responsiveness of the layouts they’ll enable you to create.