为什么我的网站不响应浏览器窗口的大小？答案

【问题标题】：Why doesn't my site respond to the size of my browser window?为什么我的网站不响应浏览器窗口的大小？
【发布时间】：2015-07-13 22:22:24
【问题描述】：

我在我的 CSS 中创建了一个包含媒体查询的页面，以便它响应设备的视口。

当我使用 Firefox Web 开发工具进行响应式设计时，我可以看到我的网站是如何反应的。但是当我调整浏览器大小时，我不能。

http://champlain.torqueweb.com/html/Responsive1.html

我应该为我的元数据使用不同的值吗？

【问题讨论】：

考虑在 Stack Overflow 上的 how to ask 上阅读此帮助主题。阅读后，编辑您的问题。这有可能成为话题:)

标签： css responsive-design media-queries viewport meta

【解决方案1】：

最大设备宽度应该是：

最大宽度

有效，我测试过了

【讨论】：

设备宽度看设备，所以如果你调整浏览器大小，没关系
做到了！谢谢！这是我的第一个响应式网站。元数据必须与媒体查询匹配。很高兴知道！我很感激！

【解决方案2】：

您在样式表中使用了固定宽度。

F.i.

nav {
width:1024px; <<<< prevents responsiveness as the width will be fixed
height:40px;  
font-family: Arial;
margin: 0 0 10px 0;
list-style: none;
background-color: #000033;
}

这些固定宽度不会在您的媒体查询中重置（即@media ...）。

要么在媒体查询中进行修改，要么更好地仍然使用 % 或 em 消息，其中并非绝对需要具有固定的宽度或高度。

F.i.

nav {
width:100%; <<<< will resize to the max available width
height:40px;  
font-family: Arial;
margin: 0 0 10px 0;
list-style: none;
background-color: #000033;
}

【讨论】：

【解决方案3】：

第 1 点是您将页面居中，我认为我们不应该为响应式页面设计将页面居中（我的意思是整个身体甚至容器）...

如果你没有真正定义 width 属性，浏览器会假设它是自动的，所以页面会在浏览器窗口中展开。

也许这应该有帮助（不要评判我，我不是很有经验：O）

【讨论】：