我想让我的样式响应浏览器中书签栏的打开。
我有一个监视屏幕高度的媒体查询。
当我手动拖动屏幕(降低其高度)时，媒体查询按预期工作。
但是，当我打开书签栏时，视口(viewport)会缩小(根据 Chrome DevTools，超过它应该触发媒体查询的点)但没有任何反应。
1.) 为什么会这样？
2.) 是否有处理书签栏更改视口(viewport)大小的最佳实践？
更新:
这不是 this 的副本问题。
该问题询问 100vh 是否考虑了书签栏。我在问为什么我的媒体查询不响应改变视口(viewport)像素高度的书签栏。
另一个更新:
示例链接在这里:https://n7m58rjj84.codesandbox.io/
在新选项卡中打开，上下调整窗口大小，媒体查询工作正常。
尝试打开和关闭书签栏，但没有任何反应。
相关代码:
例如中小断点之间:
`@media (min-height: 720px) and (max-height: 760px) { ... }`
最佳答案
使用这个简单的代码并打开和关闭书签显示:
<html>
<head>
<style>
body {
background: #0f0;
}
@media (min-height: 720px) and (max-height: 760px) {
body {
background: #f00;
}
}
</style>
</head>
</html>
一切正常
- 在 Chrome 72.0.3626.119 中测试
- 在 Firefow 65.0.2 中测试(带有个人菜单栏)
确保您的测试包括在修改视口(viewport)高度 (760 - 720) 时需要保持在这个 40px 范围内的事实，否则媒体查询不会被触发
关于javascript - CSS响应书签栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54968329/