为不同的媒体宽度加载不同的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)将仅在特定视口大小上加载此样式表。

欢呼！