css css2 css3_何时使用哪些CSS度量

css css2 css3

Amidst the diversity of CSS measurement systems it can be difficult for web developers to understand which units to use where, and when, on their pages. The instinct is to use just one system for everything, but that decision can severely limit the execution of your designs.

在CSS度量系统的多样性中，Web开发人员可能难以理解在页面上的位置和时间使用哪个单位。 本能是对所有事物仅使用一个系统，但是该决定会严重限制设计的执行 。

What follows is a list of suggestions, not absolute rules. If you have a differing opinion or working practice (and a rationale to back it up), please share in the comments.

以下是建议列表，而不是绝对规则。 如果您有不同的意见或工作做法(以及支持它的理由)，请分享评论。

Pixels (px) 像素(px)

Use for: hairline borders and general elements when creating fixed-width designs; values for 用途：创建固定宽度的设计时，细线边框和常规元素； CSS shadow displacement. Avoid using in CSS阴影位移的值。 避免在 @media@media design needs to adapt. Use 设计需要适应的地方。 请改用 rem or rem或 em instead. em 。

Don’t use for: typography. (Exception: setting a base font-size in a 请勿用于：版式。 (例外：在 CSS reset). CSS reset中设置基本字体大小)。

Percentage (%) 百分比(％)

Use for: making 用于：制作 responsive images and 响应式图像和 containers; setting 容器 ； 在某些情况下设置身体的 height on the body in some cases. height 。

Don’t use for: typography. (Exception: 请勿用于：版式。 (例外： font-size CSS reset.font-size CSS重置。

em, ex em，前

Use for: typography, and elements related to typography (margins, for example), with the understanding that 用于：印刷术以及与印刷术有关的元素(例如，边距)，要理解的是 em and em和 ex have a subtle “gotchas” when used in complex layouts. Consider using ex在复杂布局中使用时具有微妙的“陷阱”。 考虑使用 remrem

Points and picas 点和异食癖

Use for: 用于： print stylesheets. 打印样式表 。

Don’t use for: anything else.

请勿用于：其他任何 用途 。

rem 雷姆

Used as: 用作 ： em and em和exex的更健壮和可预测的替代方法 @media query breakpoints. @media查询断点。

before the rem measurement) or a polyfill.

如果您希望支持IE8及更早版本，请 rem测量 之前在更常见的设备中提供替代测量)或一个polyfill。

Viewport units (vh & vw) 视口单位(vh和vw)

Use for: 用于 ： responsive typography; 响应式印刷术 ; “perfect” responsive containers. “完美”的响应式容器。

Don’t use in: media queries, as the viewport will never attain a width of less than 100vw or a height less than 100vh: by definition, those numbers correspond to the current dimensions of the browser window, no matter how large or small the screen or device is. Be aware of the unit’s lack of support in IE8. 请勿用于：媒体查询，因为视口永远不会达到小于100vw的宽度或小于100vh的高度：根据定义，这些数字对应于浏览器窗口的当前尺寸，无论浏览器窗口的大小如何屏幕或设备。 请注意，该单元在IE8中缺乏支持。

Inches (in) and Centimeters (cm) 英寸(英寸)和厘米(cm)

Use with: print stylesheets, especially page margins 用于 ：打印样式表，尤其是页边距

Don’t use for: anything else.

请勿用于：其他任何 用途 。

Character (ch) 字符(ch)

Use when: sizing and adjusting monospaced fonts. Be aware of browser support limitations.

在以下情况下 使用 ：调整大小和调整等宽字体。 请注意浏览器支持限制。

Grid (gd) 格线(GD)

Use for: experimental layouts; the unit is only supported in IE10+ at this moment. 用于 ：实验布局； 目前仅在IE10 +中支持该设备。 Polyfills are beginning to appear, however. 但是，Polyfills开始出现。

Raw numbers 原始数字

line-heightline-height border-imageborder-image

翻译自: https://thenewcode.com/775/Which-CSS-Measurements-To-Use-When

css css2 css3