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

标签 javascript css responsive-design

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

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

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

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

最佳答案

不要重新发明轮子。只需使用 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).

关于javascript - 使用 Javascript 读取 CSS 文件并动态更改页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12306728/

相关文章:

javascript - 如何从指令的 Controller 调用依赖注入(inject)服务的嵌套方法?

javascript - 如何在 Electron 应用程序中截取整个网页的屏幕截图?

javascript - 如果文本框具有焦点,则按下特定键时执行功能

javascript - 如何删除 Firestore 子集合中的文档

html - 如何在 Bootstrap 中将输入框与一些 sr-only 标签对齐

Html 媒体标签不惜一切代价工作

html - 响应式 Html5 视频分辨率

jQuery 内容 slider (更多 CSS)

html - 元素离开行上的 CSS 过渡

javascript - 使用现代 CSS 过渡使文本立即出现但逐渐淡出