CSS確定活動媒體查詢

在JavaScript中是否有一種直接的方式（不涉及解析CSS代碼）來確定哪些媒體查詢是活動的？CSS確定活動媒體查詢

比如我有兩個疑問：

@media screen and (max-width:800px) 

@media screen and (min-width:801px)

沒有解析和看clientWidth，我怎麼能分出哪個其中之一已經評估爲true。

來源

2011-03-28 freddylindstrom

檢查計算樣式。 – BoltClock 2011-03-28 14:09:28

是的，我可以做到這一點，但假設我有一個元素來計算。我試圖根據媒體查詢填寫數據，但我還沒有到位的元素，並且在某些元素中加入了一些虛假數據來做出此決定似乎很「黑客」。 – freddylindstrom 2011-03-28 15:57:55

當某個寬度（作爲臨時度量）被觸發時，您可以將某個容器/ DIV的背景/邊框設置爲鮮紅色？ – Dan 2011-04-07 05:15:16

保羅愛爾蘭的MatchMedia可以做的伎倆： https://github.com/paulirish/matchMedia.js

但願適合你正在嘗試做什麼？

來源

2011-04-14 01:03:27

它會工作，但是我正在尋找一個更優雅的方法:-( – freddylindstrom 2011-04-14 22:47:09

要查看媒體查詢關於調整大小或方向如何變化不同的反應，試試這個頁面上的演示：

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

您可以調整媒體查詢屬性得到它們如何影響頁面的感覺。

來源

2011-04-20 16:43:17

嗨，我希望這會有所幫助，我實際上添加一個類來選擇，我用這個工具的工作：https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

事實上，他們有什麼大小的窗口內打開這裏一個明顯的例子 http://robnyman.github.io/matchmedia/

在我的情況下，我只是做特定的任務，當我在一個特定的大小，你可以使用該函數。

來源

2014-01-10 00:14:05 GabouhSk8

我不知道你怎麼知道哪些媒體查詢是積極的，但是......

...你就不能檢查與JavaScript屏幕寬度？

if (window.innerWidth >= 801) { 
    // @media screen and (min-width:801px) 
} else { 
    // @media screen and (max-width:800px 
}

或者，我在這裏失蹤了什麼？

來源

2016-02-09 03:03:19

哦，只是看到_without解析，並看着clientWidth，_，對不起 – 2016-02-09 03:06:05

儘管這是一個古老的問題，但它在搜索這個問題時排名很高。

Window.matchMedia是官方的，並且由all major browsers（IE10 +）支持，並允許您查詢某個媒體查詢是否當前匹配。

從原來的問題：

if (window.matchMedia('screen and (max-width:800px)').matches) { 
    // it matches 
} else { 
    // does not match 
}

您還可以偵聽當一個事件監聽器連接到MediaQueryList是window.matchMedia返回查詢比賽結果的變化：

var mql = window.matchMedia('screen and (max-width:800px)'); 
mql.addEventListener(
    function(mq) { 
     if (mq.matches) { 
      // it matches 
     } else { 
      // does not match 
     } 
    } 
);

來源

2016-03-21 14:47:58 Pete

CSS確定活動媒體查詢

回答

相關問題