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

Question

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

当我使用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 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 3

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

就像您实际上没有定义宽度属性，浏览器将在Take Take Auto时假设，因此该页面将通过浏览器窗口传播。

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