<length>

翻译不完整。 请帮助我们翻译这篇文章!

长度 <length> 是用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度,比如 widthmarginpaddingfont-sizeborder-widthtext-shadow

注意:虽然 <percentage> 值也是 CSS 维度,并且可以在接受 <length> 值的某些相同属性中使用,但它们本身不是 <length> 值。具体请参阅<length-percentage>

语法

<length> 数据类型由一个 <number> 和一个长度单位构成。 与所有 CSS 维度一样,单位的字面值与数字之间没有空格。 数字为 0 时,长度单位是可选的。

单位

相对长度单位

相对长度代表着以其它距离为单位的一种尺寸。这个单位可以是指定字符的大小,行高,或者是 viewport 的大小。

字体相对长度

Font-relative lengths define the <length> value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent.

Note: These units, especially em and rem, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size.

cap
表示元素字体 font 的“上限高度”(cap height,大写字母的标称高度(nominal height))。
ch

这一单位代表元素所用字体 font 中“0”这一字形的宽度("0",Unicode字符U+0030),更准确地说,是“0”这一字形的预测尺寸(advance measure)。

如果无法确定“ 0”字形的大小,则必须假定其宽为 0.5em,高为 1em

em
相对长度单位,这个单位表示元素的 font-size 的计算值。如果用在font-size 属性本身,它则表示元素继承font-size 值。
ex
这个单位表示元素fontx-height 。在含有“X”字母的字体中,它是该字体的小写字母的高度;对于很多字体来说,1ex ≈ 0.5em
ic
等于在用于渲染的字体中找到的“水”(CJK 表意文字 "水",U + 6C34)字形的使用预先测量(used advance measure)。
lh
等于使用它的元素的 line-height 属性的计算值,转换为绝对长度。
rem
这个单位代表根元素(通常为<html> 元素)的 font-size 大小。当用在根元素的 font-size 上面时 ,它代表了它的初始值。
rlh
等于根元素行高 line-height 的计算值。当用于设置根元素的行高 line-height 或是字体大小 font-size 时,该rlh指的是根元素行高 line-height 或字体大小 font-size 的初始值。
视口(Viewport)比例的长度

视口百分比长度定义相对于 viewport 的大小的 <length> 值,即文档的可见部分。视口长度在 @page 声明块中无效。

vh
视口的初始包含块的高度的 1%。
vw
视口的初始包含块的宽度的 1%。
vi
等于初始包含块大小的 1%,在根元素的行内轴方向上。
vb
等于初始包含块大小的 1%,在根元素的区块轴方向上。
vmin
视口高度 vw 和宽度 vh 两者之间的最小值。
vmax
视口高度 vw 和宽度 vh 两者之间的最大值。

绝对长度单位

当输出介质的物理性质已知时,如用于打印布局,绝对长度单位代表一个物理度量单位。这是通过:将一个单元锚定到一个物理单元,并将其定义为相对于它的另一个,来实现的。对于低分辨率的设备(如屏幕),高分辨率设备(如打印机),该锚定是不同的。

对于低 dpi 设备,单位 px 表示物理参考像素;其他单位是相对于它定义的。因此,1 in 定义为 96px,等于 72pt。此定义的后果是,在此类设备上,以英寸(in)、厘米(cm)或 毫米(mm)表示的尺寸不需要与同名的物理单位的大小相匹配。

对于高 dpi 设备,英寸(in)、厘米(cm)和毫米(mm)与物理设备相同。因此,px 单位是相对于它们定义的 (1/96 of 1 inch)。

注意:很多用户选择增加用户代理 user agent 的字体大小以提高文本可读性。Absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings. 因此,在设置字体大小 font-size 相关的长度时,则优先选择相对长度单位,比如 emrem

译者注:一些浏览器还支持设置最低字体大小。常见的最低字体大小限制为 9px 到 12px,

px
一像素(pixel)。对于普通的屏幕,通常是一个设备像素(点)。
对于打印机高分辨率屏幕,一个 CSS 像素往往占多个设备像素。一般来说,每英寸的像素的数量保持在 96 左右, 1px = 1in 的 96 分之一。
cm
一厘米。 1cm = 96px / 2.54
mm
一毫米。 1mm = 1/10 * 1cm
Q
四分之一毫米。1Q = 1/40 * 1cm
in
一英寸。1in = 2.54cm = 96px
pc
十二点活字(pica),六分之一英寸。 1pc = 12pt = 1/6 * 1in
pt
一磅(point),72 分之一英寸。1pt = 1/12 * 1pc = 1/72 * 1in
mozmm , 在 Firefox 59 中被移除
一个实验单位,无论显示器的尺寸或分辨率如何,都会尝试在一毫米处进行渲染。很少会用到,但可能在移动设备上特别有用。

规范

Specification Status Comment
CSS Values and Units Module Level 4
<length>
Editor's Draft Adds the vi, vb, ic, lh, and rlh units.
CSS Values and Units Module Level 3
<length>
Candidate Recommendation Adds the ch, rem, vw, vh, vmin, vmax, and Q units.
CSS Level 2 (Revision 1)
<length>
Recommendation Explicit definition of the em, pt, pc, and px units.
CSS Level 1
<length>
Recommendation Initial definition. Implicit definition of the em, pt, pc, and px units.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<length>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Q unitChrome Full support 63Edge Full support 79Firefox Full support 49IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 49Opera Android Full support 46Safari iOS No support NoSamsung Internet Android Full support 8.0
cap unitChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ch unitChrome Full support 27Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes From Firefox 1 to Firefox 3, ch was the width of the M character.
Notes From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE Full support 9Opera Full support 20Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 7Samsung Internet Android Full support 1.5
ex unitChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
ic unitChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
lh unitChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozmm unit
Non-standard
Chrome No support NoEdge No support NoFirefox No support 4 — 59IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 59Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
rem unitChrome Full support 4Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 11.6Safari Full support 5WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 4Samsung Internet Android Full support 1.0
rlh unitChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vb unitChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vh unitChrome Full support 20Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5
vi unitChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vmax unitChrome Full support 26Edge Full support 16Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 1.5Chrome Android Full support 26Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
vmin unitChrome Full support 26Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: vm
Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 10
Full support 10
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: vm
Opera Full support 15Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
vw unitChrome Full support 20Edge Full support 12Firefox Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support ≤37Chrome Android Full support 25Firefox Android Full support 19
Notes
Full support 19
Notes
Notes Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android Full support 14Safari iOS Full support 6Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

参见