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

Question

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

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

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

我应该用我的元不同的价值？

Answer 1

最大设备宽度应该是：

最大宽度

作品，我测试它

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

Answer 3

点1是你为中心的页面，我认为我们不应该居中的页面了（我指的是整个身体的事情，甚至是容器）的自适应网页设计......

就像你没有真正定义宽度属性一样，浏览器会假定它是自动的，所以页面会遍布浏览器窗口。

也许应该是有益的（不要评判我，我不是很有经验：O）