如何为桌面和移动浏览器的响应式设计合并特定的CSS文件

Question

我想要的是为移动和桌面浏览器实现动态设计。到目前为止，这是我的实施：

<link rel='stylesheet' media='only screen and (min-width: 1441px)' href='css/main.css' /> 
<link rel='stylesheet' media='only screen and (max-width: 320px)' href='css/design320.css' />
<link rel='stylesheet' media='only screen and (max-width: 360px)' href='css/design360.css' />

但我的问题是即使我正在测试320px宽度分辨率，仍然会下载design360.css。

是否有任何解决方案可以将设计纳入特定分辨率？

Answer 1

尝试添加min-width属性。

<link rel='stylesheet' media='only screen and (min-width: 321px) and (max-width: 360px)' href='css/design360.css' />

现在，您的第二个和第三个样式表将应用于宽度小于360px的任何页面，因为只提供了max-width。