從Javascript訪問CSS3媒體查詢

現在，終於在12年後，當全世界都在跳入CSS3媒體查詢和響應式設計潮流時，問題依然存在。從Javascript訪問CSS3媒體查詢

如何可以從Javascript知道哪些媒體查詢是

出現在HTML代碼：這應該是簡單的元素穿越，但是否有更聰明的方法呢？
有效（查詢結果爲true）

...所以你可以添加特殊的代碼路徑，支持手機，平板電腦等在Javascript代碼？最終，人們可以編寫函數isMobile()並將其用作特定於小屏幕地圖的某些操作的標誌。

來源

2012-03-14 Mikko Ohtamaa

'document.styleSheets [i] .media [j]' – kirilloid 2012-03-14 06:59:26

對於每個感興趣的媒體查詢，您的頁面中可能會有一個特定的對象，從CSS獲取已知樣式。然後，您可以通過getComputedStyle()從對象中讀取該樣式，並查看分配給它的內容，這將告訴您哪個媒體查詢具有優先級。

來源

2012-03-14 07:33:30 jfriend00

任何關於「隱形」風格的想法我都可以使用暗示，例如，在？這些樣式不會影響佈局，但可以通過getComputedStyles（）變得可讀？ – 2012-03-20 07:40:22

你可以使用一個絕對定位於'left：-1000px'的div。因爲它是'position：absolute'，它不會影響頁面的佈局。因爲它是「left：1000px」，所以它不會顯示，並且不會導致滾動條。然後，使用媒體查詢規則在其上設置CSS寬度，並且可以使用getComputedStyles（）讀取該寬度。當jQuery需要瀏覽器佈置的東西時，jQuery使用這個技巧來計算結果，但不可見。 – jfriend00 2012-03-20 07:45:20

從Javascript訪問CSS3媒體查詢

回答

相關問題