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 和 IE_min972_max1024 的单独 CSS 文件，并使用 Javascript 动态加载和卸载文件作为调整页面宽度。但这违反了 D.R.Y.在多个地方维护 CSS 会很痛苦。

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

Answer 1

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

来自 GitHub 上的自述文件:

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).