为什么我的网站不响应浏览器 window 的大小？

Question

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

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

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

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

Answer 1

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

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 messurements。

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

Answer 2

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

比如如果你没有实际定义宽度 属性，浏览器会假设它是自动的，所以页面会在整个浏览器中展开 window。

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

Answer 3

最大设备宽度应为：

最大宽度

有效，我测试过