Media Queries: aspect-ratio

闂傚倸鍊搁崐鎼佸磹瀹勬噴褰掑炊瑜夐弸鏍煛閸ャ儱鐏╃紒鎰殜閺岀喖鎮ч崼鐔哄嚒闂佸憡鍨规慨鎾煘閹达附鍋愰悗鍦Т椤ユ繄绱撴担鍝勵€岄柛銊ョ埣瀵鏁愭径濠勵吅闂佹寧绻傞幉娑㈠箻缂佹ḿ鍘搁梺鍛婁緱閸犳宕愰幇鐗堢厸鐎光偓鐎ｎ剙鍩岄梺瀹狀嚙濞撮攱绂掗敃鍌涘癄濠㈣泛妫欑€氱喖姊婚崒娆戭槮闁硅姤绮撳畷鎴濃槈閳垛斁鍋撻敃鍌涘€婚柣锝呰嫰缁侊箓妫呴銏″缂佸甯″畷鎰嫚濞村鏂€濡炪倖妫佸Λ鍕叏閳ь剟姊虹粙娆惧剱闁规瓕顕ч銉╁礋椤栨氨鐤€濡炪倖鎸炬慨鏉戭嚕閹惰姤鈷掑ù锝堟鐢盯鏌＄仦璇插妤犵偛顦甸弫鎾绘偐閸愭祴鍋撻懜鐐逛簻闁哄洦顨呮禍楣冩⒑閸濆嫮鐏遍柛鐘冲姍钘濋柣妤€鐗婇崕鐔兼煃閵夈儱鏆辩紒鐙呯秮濮婄粯鎷呴懞銉ｂ偓鍐煟閹虹偟鐣垫鐐村灴瀹曟儼顧侀柛銈嗘礃閵囧嫰骞掗幋婵愪患闁搞儲鎸冲铏瑰寲閺囩偛鈷夊銈冨妼缁绘垹鈧潧銈搁弫鎾绘晸閿燂拷

Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+

语法：

aspect-ratio：<ratio>

取值：

<ratio>：
指定比率

说明：

定义输出设备中的页面可见区域宽度与高度的比率。
  • 本特性接受min和max前缀，因此可以派生出min-aspect-ratio和max-aspect-ratio两个媒体特性。

    简单列举几个应用示例：

    @media screen and (aspect-ratio:1680/957){ … } @import url(example.css) screen and (max-aspect-ratio:20/11);

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-8.0 2.0-3.0 4.0-25.0#1 6.0#1 15.0+ 6.0-6.1#1 2.1-4.3#1 18.0-24.0#1
9.0-11.0#1 3.5+ 26.0+ 6.1+ 7.0+ 4.4+ 25.0+
  1. 不支持嵌套媒体查询。

示例：