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;
  }
}

有两件事困扰着我：

查看这些最小和最大宽度值并不是很有效。全高清 phone 尽管尺寸只有 5 英寸，但看起来就像一台台式电脑。是否有纯粹的 CSS 方法来限制屏幕尺寸而不是分辨率？或者两者兼而有之，这样也可以满足调整大小的桌面浏览器的需求。
将宽度设置为 100% 效果很好，因为我的弹出窗口从屏幕的最左侧开始。 100% 的高度不起作用，因为总高度是屏幕的 100% + 搜索框高度 + 徽标高度（一旦我添加），因此它会滚动到屏幕底部。我需要的是一种将其大小调整为 DIV 顶部和屏幕底部之间的距离的方法。

我不介意 JavaScript 解决方案，但我认为我应该只用 CSS 就可以做到这一点，我更喜欢那样。

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

编辑： 我应该补充一点，我在项目中使用了 Foundation。在此代码段中我没有使用 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) 要获得 "screen-height" 的内容，请尝试使用 100vh 而不是 100%。 vh表示viewport height unit； 100vh = 1 window 高度。（50vh = 一半 window 高度等。vw 对宽度做同样的事情。）如果你发现它仍然太高，你可能需要调整它以减去增加的高度- IE，如果你有一个徽标或任何将 100vh 元素向下推 80 像素的东西，你可以将高度更改为 height: calc(100vh - 80px) 以使其适合。

CSS3 响应式弹出窗口

CSS3 Responsive popup

javascript

css

responsive-design

zurb-foundation