使用 Javascript 读取 CSS 文件并动态更改页面答案

【问题标题】：Read a CSS file with Javascript and dynamically alter the page使用 Javascript 读取 CSS 文件并动态更改页面
【发布时间】：2012-08-31 15:58:41
【问题描述】：

所以 CSS @media 查询在 IE8 中不起作用。

@media (min-width: 768px) {
/* some css */
}
@media (min-width: 972px) and (max-width: 1024px){
/* different css */
}

现在，我可以创建名为 IE_min768.css 和 IE_min972_max1024 的单独 CSS 文件，并使用 Javascript 在调整页面宽度时动态加载和卸载文件。但这违反了 D.R.Y.在多个地方维护 CSS 会很痛苦。

是否可以使用 Javascript（仅在 IE 中）实际读取 CSS 文件、检测 @media 部分并在正确的情况下将该 CSS 动态应用到浏览器？

【问题讨论】：

【解决方案1】：

不要重新发明轮子。只需使用respond.js。

来自 GitHub 上的自述文件：

此脚本的目标是提供一个快速且轻量级（3kb 压缩/1kb gzipped）的脚本，以在不支持 CSS3 媒体查询的浏览器（尤其是 Internet Explorer 8 及更低版本）中启用响应式网页设计。它的编写方式可能会修补对其他不支持的浏览器的支持（很快就会有更多信息）。

【讨论】：

效果很好！为了完整起见，我还想提一下 respond.js 的创建者链接到的 css3-mediaqueries-js。响应对我有用，因为我的 CSS 不太复杂。