【发布时间】：2023-03-26 18:38:01
【问题描述】：
我想实现一个考虑到视口高度的断点，如下例所示：
@media (min-width: 2560px) and (min-height: 1440px){
zoom:1.25;
}
但是我如何考虑浏览器标题和操作系统的标题，例如。在 mac 上有一个顶部工具栏。这些是否有标准高度，我可以从断点中声明的最小高度中减去？
【问题讨论】：
-
为什么需要知道工具栏高度？媒体查询中的
height和width是关于视口（可用于呈现网页的可见区域）。 -
因为例如我希望它在那个尺寸的屏幕上满足这个条件，但它不会因为浏览器标题和操作系统标题@t.niese
-
@media (min-width: 2560px) and (min-height: 1440px)将匹配如果要查看网页的区域具有至少2560px的宽度和至少1440px的高度。这与窗口或屏幕的宽度和高度无关。所以我不明白为什么周围窗口的任何部分都与你相关？ -
在移动设备上，如果您必须考虑缺口、打孔摄像头或圆角，可能会出现问题。因为那些在视口内。为此，您可以使用
env()查询视口的保存区域。但是桌面浏览器上的工具栏在视口之外。 -
@t.niese 我正在尝试以 2560 × 1440px 的特定屏幕尺寸为目标，因此如果在该尺寸的屏幕上查看它不会通过定义的断点，因为高度会少一点。
标签： css breakpoints