Question

宽高比媒体查询的正确值是什么？为什么以下媒体查询不起作用？我想从比率＆lt; 1

中分离比率> 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 - 自20世纪60年代以来最常见的电影格式。
239/100 - “宽屏”，变形电影格式。

但请注意， aspect ratios still spotty in Chrome 。目前，基于dpi，使用 resolution 通常会“更安全”：

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

宽高比媒体查询的正确值是什么？

1 个答案: