CSS响应书签栏

时间：2019-03-03 11:28:19

标签： javascript html css

我想根据浏览器中书签栏的打开来设置样式。

我有一个媒体查询，看着屏幕的高度。

当我手动拖动屏幕（减小其高度）时，媒体查询将按预期工作。

但是，当我打开书签栏时，视口会收缩（根据Chrome DevTools，视口会收缩到触发媒体查询的位置），但没有任何反应。

1。）为什么会这样？

2。）是否有最佳做法来处理书签栏以更改视口的大小？

更新：

不是重复的this问题。

该问题询问100vh是否考虑了书签栏。我问我的媒体查询为什么不响应书签栏更改视口像素高度的情况。

另一个更新：

链接到示例：https://n7m58rjj84.codesandbox.io/

在新标签页中打开，上下调整窗口大小，媒体查询工作正常。

尝试打开和关闭书签栏，没有任何反应。

Edit n7m58rjj84

相关代码：

例如在中小断点之间：

 `@media (min-height: 720px) and (max-height: 760px) { ... }`

1 个答案:

答案 0 :(得分：0)

使用此简单代码并打开和关闭书签显示：

<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中进行了测试（带有个人菜单栏）

请确保您的测试包含以下事实：修改视口的高度（760-720）时，您需要保持在40px范围内，否则媒体查询将不会出现

相关问题
最新问题