使用Javascript讀取CSS文件並動態更改頁面

因此CSS @media查詢在IE8中不起作用。現在使用Javascript讀取CSS文件並動態更改頁面

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

，我可以創建單獨的CSS文件命名爲IE_min768.css和IE_min972_max1024和使用JavaScript動態加載和卸載文件的頁面寬度進行調整。但是這違反了D.R.Y.並且在多個地方維護CSS會是一件痛苦的事情。

是否可以使用Javascript（僅在IE中）實際讀取CSS文件，檢測@media部分並在正確的情況下動態地將該CSS應用於瀏覽器？

來源

2012-09-06 brentonstrine

我在某處詼諧地觀察到「缺乏媒體查詢支持是第一個媒體查詢」:-) – Pointy

只是一個猜測，但是您可以使用'@ import'幹掉CSS嗎？ –

更多相似文章文檔： http://stackoverflow.com/questions/7444658/best-solution-framework-to-responsive-design-for-ie7?rq=1 – Kostia

不要重新發明車輪。只需使用respond.js即可。

從GitHub上的自述：

這個腳本的目的是提供一個快速，重量輕（3KB縮小的/ 1KB gzip壓縮）腳本，使響應的網頁設計中不支持CSS3媒體瀏覽器查詢 - 特別是Internet Explorer 8及以下版本。它的編寫方式可能會補充對其他不支持的瀏覽器的支持（有關這方面的更多信息）。

來源

2012-09-06 19:07:22

工程很漂亮！爲了完整起見，我還想提及respond.js的創建者鏈接到的[css3-mediaqueries-js]（http://code.google.com/p/css3-mediaqueries-js/）。 Respond正在爲我工作，因爲我的CSS不是太複雜。 – brentonstrine

使用Javascript讀取CSS文件並動態更改頁面

回答

相關問題