移动@media 查询不使容器覆盖整个屏幕

Question

我有一个调查页面，其中有一个 background-color: red 和一个较小的容器来保存调查内容，如下面的桌面示例所示：

现在，我使用这些@media 查询试图让白色容器覆盖手机上的整个页面（所以整个页面都是白色容器，没有红色背景）

@media (max-width: 600px) {
  #survey-container {
    width: 100%;
    padding: 0px;
    }
  }
  @media (max-height: 800px) {
  #survey-container {
    height: 100%;
    padding: 0px;
    }
  }

现在，这些查询似乎对手机没有影响，给我这个页面：

为什么我的容器还没有覆盖整个页面？

完整的 HTML 代码在这里，giants-survey.html 页面：https://glitch.com/edit/#!/jdipasquale

Answer 1

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500) }

此字体导入末尾的括号导致 @media 查询不起作用，删除它并添加 min-width: 100% 使其起作用。