css - 宽高比媒体查询的正确值是多少？

Question

纵横比媒体查询的正确值是多少？ 为什么以下媒体查询不起作用？ 我想将 ratio>1 的情况与 ratio <1

分开

@media only screen and (max-width: 1399px) and (min-width: 1350px) and (min-aspect-ratio: 99/100) {
  div#aboutSLw {
    min-height: 1616.12131px !important;
    min-width: 0.45px !important; }
  div#aboutSLw div.topimage {
    min-height: 1616.12131px !important;
    min-width: 0.45px !important; }
  div.topimage img.vpimg {
    min-height: 1616.12131px !important;
    min-width: 0.45px !important; }
  div.topimage h2 {
    font-size: 1.85em !important; }
  div.topimage h2 span, div.topimage h2 span * {
    font-size: 1.45em !important; } }

Answer 1

主要 ratios 是:

• 4/3 - 20 世纪的传统电视格式。
• 16/9 - 现代“宽屏”电视格式。
• 185/100或 91/50 - 自 1960 年代以来最常见的电影格式。
• 239/100 - “宽屏”，变形电影格式。

但是，请记住 aspect ratios 是 still spotty in Chrome 。目前，使用 resolution 通常“更安全” ，基于 dpi:

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

或者还有已弃用的 min-device-pixel-ratio (以及可选的 orientation )。令人讨厌的是，这没有“标准”，您需要手动指定供应商前缀:

• -webkit-min-device-pixel-ratio
• -moz-min-device-pixel-ratio
• -o-min-device-pixel-ratio

例如，要定位到 iPhone X，您可以使用:

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
}

CSSTricks 有一个 helpful cheatsheet 展示这方面最常见的设备查询。