为不同的媒体宽度加载不同的 CSS

Question

我正在制作一个网站，设计是响应式的。但是对于菜单，我选择了一个简单的切换按钮，当加载到移动设备上时，菜单将驻留于此。当按钮被点击时，菜单将出现一个简单的<ul><li> 渲染项目符号列表。但问题是，对于网站，我为菜单做了复杂的 CSS；当我在移动设备上加载网站时，我应该怎么做？

• 是否需要将所有 CSS 属性重置到菜单 CSS 中，然后将移动设备特定的 CSS 重置到媒体查询中？

我认为这不是一个可行的想法。

那么，我该怎么办？我的一位同事建议我为不同的媒体宽度加载不同的 CSS，但是如何？

我想避免在 CSS 中使用 @import，因为它会降低网站速度。

Answer 1

是的，您可以为不同的视口/媒体宽度加载不同的 CSS。假设您将站点菜单 CSS 设置为 menu.css，并将移动设备的菜单 CSS 设置为 mobile.css，然后：

<link rel='stylesheet' href='css/menu.css' type='text/css' media='screen'/>
<link rel='stylesheet' href='css/mobile.css' type='text/css' media='screen and (max-width: 800px)'/>

第二个样式表专为移动设备友好的 CSS 设计，如您所愿，附加部分 and (max-width: 800px) 将仅在特定视口大小上加载此样式表。

干杯！