纵横比媒体查询的正确值是什么？答案

【问题标题】：What are correct values for aspect-ratio media query?纵横比媒体查询的正确值是什么？
【发布时间】：2018-03-14 01:19:19
【问题描述】：

长宽比媒体查询的正确值是什么？为什么以下媒体查询不起作用？我想将 ratio>1 的情况与 ratio 分开

@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; } }

【问题讨论】：

标签： css media-queries aspect-ratio node-sass

【解决方案1】：

主要的ratios是：

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

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

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

另外还有已弃用的min-device-pixel-ratio（以及可选的orientation）。烦人的是，这没有“标准”，您需要手动指定供应商前缀：

例如，要定位 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 展示了这方面最常见的设备查询。

【讨论】：