<length-percentage>

跳转到：
  1. Syntax
  2. Use in calc()
  3. Specifications
  4. Browser compatibility

我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译
您也可以阅读此文章的English (US)版。

The <length-percentage> CSS data type represents a value thatcan be either a <length> or a <percentage>.

Syntax

Refer to the documentation for <length> and<percentage> for details of the individual syntaxes allowed by this type.

Use in calc()

Where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. Therefore all of the following values are acceptable for width:

width: 200px
width: 20%
width: calc(100% - 200px)

Specifications

Specification Status Comment
CSS Values and Units Module Level 4
The definition of '<length-percentage>' in that specification.		 Editor's Draft  
CSS Values and Units Module Level 3
The definition of '<length-percentage>' in that specification.		 Candidate Recommendation Defines <length-percentage>. Adds calc()

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<length-percentage>Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cap unit
Experimental
Chrome 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 NoEdge Mobile 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 YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 7.1Samsung Internet Android Full support Yes
ex unitChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 4Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ic unit
Experimental
Chrome 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 NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
lh unit
Experimental
Chrome 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 NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozmm unit
ExperimentalNon-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 NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Q unit
Experimental
Chrome Full support 63Edge No support NoFirefox Full support 49IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Edge Mobile No support NoFirefox Android Full support 49Opera Android Full support 46Safari 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 4.1WebView Android Full support 2Chrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 4Samsung Internet Android Full support Yes
rlh unit
Experimental
Chrome No support NoEdge Full support YesFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
vb unit
Experimental
Chrome 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 NoEdge Mobile 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 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
vi unit
Experimental
Chrome 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 NoEdge Mobile 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 ? Firefox Full support 19IE No support NoOpera Full support 20Safari Full support YesWebView Android Full support 1.5Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 19Opera Android No support NoSafari iOS Full support 4Samsung Internet Android Full support Yes
vmin unitChrome Full support 20Edge ? Firefox Full support 19IE Full support 10
Full support 10
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: vm
Opera Full support 20Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 19Opera Android No support NoSafari iOS Full support 6Samsung Internet Android Full support Yes
vw unitChrome Full support 20Edge Full support 12Firefox Full support 19IE Full support 9Opera Full support 20Safari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 19Opera Android Full support YesSafari iOS Full support 6Samsung Internet Android Full support Yes
Viewport-percentage lengths invalid in @pageChrome ? Edge ? Firefox Full support 21IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 21Opera Android ? Safari iOS ? Samsung Internet Android ?
1in is always equal to 96pxChrome Full support YesEdge ? Firefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
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.

文档标签和贡献者

标签： 
此页面的贡献者： alattalatta, mdnwebdocs-bot, chrisdavidmills, rachelandrew
最后编辑者: alattalatta,