Question

我正在尝试测试一些比率媒体查询：

例如：

@media screen and (min-aspect-ratio: 8/5) { ... }

请参阅完整代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

  <style type="text/css">

    .mq {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
}

@media screen and (min-aspect-ratio: 8/5) {

    .mq {
        background-color: red;
    }

}

  </style>

</head>

<body>

<div class="mq">
    Some text here. This DIV can be resized.
</div>

</body>
</html>

上面代码的问题是，只有在比率为18/5但它总是红色的情况下才会变红。

此代码有什么问题？

Answer 1

你的代码很好，CSS说你需要一个至少8/5的比例，如果你拖动屏幕尺寸你应该看到当你的窗口比它宽得多时它会改变。

如果你想为div而不是窗口产生这种效果，那么你需要使用javascript而不是媒体查询来处理它。

var $div = $('.mq');
$div.change(function() {
    if ($div.width() / $div.height() < 1.6) {
        $div.css('background-color', 'white')
    } else {
        $div.css('background-color', 'red')
    }
});

媒体查询比率未触发

1 个答案: