Question

我建立了一个网站，其中包含一个固定位置的扩展/收缩搜索表单。这在桌面上很有用 - 但是对于任何不允许所需高度的建议当然会有问题。我打算使用媒体查询高度，即 -

@media (min-height: 700px) {
    #quick-search{position:relative;}

}

并将快速搜索内联放置在没有可滚动高度的设备上 - 以确保它可以滚动。

但我的理解是，某些设备操作系统/浏览器将高度称为文档高度而不是视口高度 - 因此上述解决方案无法将QS转换为内联所有必需的方案。我对此是否正确？如果是这样，任何人都可以提出适合所有情况的替代解决方案吗？

Answer 1

只要您拥有正确的元标记，它就会使用视口进行计算。

<meta name="viewport" content="width=device-width">

要使用屏幕高度，请将screen添加到媒体

@media screen and (min-height: 700px) {
    #quick-search{position:relative;}

}