javascript - 使用 Javascript 读取 CSS 文件并动态更改页面

Question

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

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

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

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

Answer 1

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

来自 GitHub 上的自述文件：

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