我正在尝试测试一些 Ratio 媒体查询:
例如:
@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 时才变红，但它始终是红色。
这段代码有什么问题？
最佳答案
你的代码很好，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')
}
});
关于html - 比率的媒体查询未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46163414/