aspect-ratio
CSS
media feature
can be used to test the aspect ratio of the
viewport
.
aspect-ratio
feature is specified as a
<ratio>
value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixed
min-aspect-ratio
and
max-aspect-ratio
variants to query minimum and maximum values, respectively.
The example below is contained in an
<iframe>
, which creates its own viewport. Resize the
<iframe>
to see
aspect-ratio
in action.
Note that, when none of the media query conditions are true, the background will turn white because none of the below rules will be applied to the
<div>
inside the
<iframe>
. See if you can find which width and height values trigger this!
<div id='inner'> Watch this element as you resize your viewport's width and height. </div>
/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* blue */
}
}
/* Maximum aspect ratio */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* cyan */
}
}
/* Exact aspect ratio, put it at the bottom to avoid override*/
@media (aspect-ratio: 1/1) {
div {
background: #f9a; /* red */
}
}
used iframe and DataURL to enable this iframe could resize
<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165">
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165">
<iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
</iframe>
iframe{
display:block;
}
outer.style.width=outer.style.height="165px"
w.onchange=w.oninput=function(){
outer.style.width=w.value+"px"
wf.textContent="width:"+w.value
}
h.onchange=h.oninput=function(){
outer.style.height=h.value+"px"
hf.textContent="height:"+h.value
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
Media Queries Level 4
The definition of 'aspect-ratio' in that specification. |
候选推荐 | 无变化。 |
|
Media Queries
The definition of 'aspect-ratio' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
aspect-ratio
media feature
|
Chrome 完整支持 3 | Edge 完整支持 12 | Firefox 完整支持 3.5 | IE 完整支持 9 | Opera 完整支持 10 | Safari 完整支持 5 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 4.2 | Samsung Internet Android 完整支持 1.0 |
完整支持