CSS3响应式弹出窗口

Question

我正在尝试创建一个搜索框，其结果弹出窗口在桌面和移动设备上都很好看。

我会尝试使用这两个模型更好地解释：

对于桌面版本，我想为结果弹出窗口指定宽度和高度，让它浮动在页面内容上。

对于移动版，结果会填满搜索框下方的整个屏幕宽度和整个高度。因此，没有任何内容可以在其后面查看，也不会滚动查看搜索结果的任何部分。

从概念上讲，我认为我需要一个媒体查询，但我很难让它运作良好。

我已经包含了一个完整的代码段，但这里是我修改过的CSS。 320px的值完全是任意的，这是我问题的一部分。

@media only screen and (max-width: 320px) {
  .popup {
    width: 100%;
  }
}

@media only screen and (min-width: 320px) {
  .popup {
    width: 295px;
  }
}

@media only screen and (max-height: 320px) {
  .popup {
    height: 100%;
  }
}

@media only screen and (min-height: 320px) {
  .popup {
    height: 300px;
  }
}

有两件事让我感到困惑：

1. 查看这些最小和最大宽度值并没有真正起作用。全高清手机似乎只是一台台式电脑，尽管尺寸只有5英寸。是否有纯CSS方式来限制屏幕大小而不是分辨率？或两者兼而有之，它们也可以满足重新调整大小的桌面浏览器的需求。
2. 使宽度100％正常工作，因为我的弹出窗口从屏幕的最左侧开始。高度100％不起作用，因为总高度是屏幕的100％+搜索框高度+徽标高度（一旦我添加它），因此滚动屏幕底部。我需要的是一种将其大小调整为DIV顶部与屏幕底部之间距离的方法。

我不介意使用JavaScript解决方案，但我认为我应该只使用CSS来执行此操作，并且更愿意这样做。

此外，我对仅与新浏览器兼容的解决方案感到满意（例如最多两年）。

修改 我应该补充一点，我在项目中使用了Foundation。我没有在这个片段中使用基金会的任何内容，但是如果我错过了一些有用的东西，我非常乐意使用它。

input {
  font-size: 18pt;
}

.popup {
  margin-top: 2px;
  position: absolute;
  display: block;
  background-color: Green;
}

@media only screen and (max-width: 320px) {
  .popup {
    width: 100%;
  }
}

@media only screen and (min-width: 320px) {
  .popup {
    width: 295px;
  }
}

@media only screen and (max-height: 320px) {
  .popup {
    height: 100%;
  }
}

@media only screen and (min-height: 320px) {
  .popup {
    height: 300px;
  }
}

<input/>
<div class="popup">
</div>
<div>
  Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. Some random text that is supposed to wind up underneath the popup. 
</div>

Answer 1

1）可以在媒体查询中包含分辨率（像素密度）以定位视网膜或高清手机等内容。例如，

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)

将针对各种视网膜和HiDPI设备。 （Source。）如果需要，您可以将其与大小查询结合使用。

2）要获得“屏幕高度”的内容，请尝试使用100vh代替100%。 vh表示viewport height unit; 100vh = 1窗口高度。 （50vh =窗口高度的一半等。vw对宽度做同样的事情。）如果你发现它仍然太高，你可能需要调整它以减去任何增加高度 - IE，如果你有一个标志或任何将100vh元素向下推80px的东西，你将高度改为height: calc(100vh - 80px)以使其适合。