html - 如何为桌面和移动浏览器的响应式设计合并特定的 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' />

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

是否有任何解决方案可以结合特定分辨率的设计？

Answer 1

也尝试添加一个 min-width 属性。

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

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