我正在制作一个网站，设计是响应式的。但是对于菜单，我选择了一个简单的切换按钮，当菜单加载到移动设备上时，菜单将驻留在该按钮上。当按下按钮时，菜单将出现一个简单的 <ul><li>。渲染元素符号列表。但问题是，对于网站，我为菜单做了复杂的 CSS；当我在移动设备中加载网站时我应该做什么？
- 我是否需要将完成的所有 CSS 属性重置到菜单 CSS 中，然后将特定于移动设备的 CSS 完成到媒体查询中？
我认为这不是一个可行的想法。
那我该怎么办呢？我的一位同事建议我为不同的媒体宽度加载不同的 CSS，但是如何？
我想避免 @import在 CSS 中，因为它会降低网站速度。
最佳答案
是的，您可以为不同的视口(viewport)/媒体宽度加载不同的 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 设计的，如您所愿，附加部分 和 (max-width: 800px) 将仅在特定视口(viewport)尺寸上加载此样式表.
干杯!
关于css - 为不同的媒体宽度加载不同的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20053474/