aspect-ratio
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
aspect-ratio CSS åªä½å±æ§ å¯ä»¥ç¨æ¥æµè¯ viewport ç宽髿¯ã
è¯æ³
宽髿¯å±æ§è¢«æå®ä¸º<ratio>弿¥ä»£è¡¨ viewport ç宽髿¯ãå
¶ä¸ºä¸ä¸ªèå´ï¼è¿æå³çä½ å¯ä»¥ä½¿ç¨ min-aspect-ratio å max-aspect-ratio å嫿¥è¯¢æå°åæå¤§çå¼ã
示ä¾
ä¸é¢çä¾åå
å«ä¸ä¸ª <iframe>ï¼æ¥æå®èªèº«ç viewportãè°æ´ç <iframe> 宽髿¥è§å¯ aspect-ratio çååã
HTML
html
<div id="inner">
Watch this element as you resize your viewport's width and height.
</div>
CSS
css
/* æå°å®½é«æ¯ */
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* blue */
}
}
/* æå¤§å®½é«æ¯ */
@media (max-aspect-ratio: 3/2) {
div {
background: #9ff; /* cyan */
}
}
/* æç¡®ç宽髿¯ï¼æ¾å¨æä¸é¨é²æ¢åæ¶æ»¡è¶³æ¡ä»¶æ¶çè¦ç*/
@media (aspect-ratio: 1/1) {
div {
background: #f9a; /* red */
}
}
ç»æ
è§è
| è§è |
|---|
| Media Queries Level 4> # aspect-ratio> |