在JavaScript中是否有一種直接的方式(不涉及解析CSS代碼)來確定哪些媒體查詢是活動的?CSS確定活動媒體查詢
比如我有兩個疑問:
@media screen and (max-width:800px)
@media screen and (min-width:801px)
沒有解析和看clientWidth,我怎麼能分出哪個其中之一已經評估爲true。
在JavaScript中是否有一種直接的方式(不涉及解析CSS代碼)來確定哪些媒體查詢是活動的?CSS確定活動媒體查詢
比如我有兩個疑問:
@media screen and (max-width:800px)
@media screen and (min-width:801px)
沒有解析和看clientWidth,我怎麼能分出哪個其中之一已經評估爲true。
保羅愛爾蘭的MatchMedia可以做的伎倆: https://github.com/paulirish/matchMedia.js
但願適合你正在嘗試做什麼?
它會工作,但是我正在尋找一個更優雅的方法:-( – freddylindstrom 2011-04-14 22:47:09
要查看媒體查詢關於調整大小或方向如何變化不同的反應,試試這個頁面上的演示:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
您可以調整媒體查詢屬性得到它們如何影響頁面的感覺。
嗨,我希望這會有所幫助,我實際上添加一個類來選擇,我用這個工具的工作:https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/
事實上,他們有什麼大小的窗口內打開這裏一個明顯的例子 http://robnyman.github.io/matchmedia/
在我的情況下,我只是做特定的任務,當我在一個特定的大小,你可以使用該函數。
我不知道你怎麼知道哪些媒體查詢是積極的,但是......
...你就不能檢查與JavaScript屏幕寬度?
if (window.innerWidth >= 801) {
// @media screen and (min-width:801px)
} else {
// @media screen and (max-width:800px
}
或者,我在這裏失蹤了什麼?
哦,只是看到_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
}
}
);
檢查計算樣式。 – BoltClock 2011-03-28 14:09:28
是的,我可以做到這一點,但假設我有一個元素來計算。我試圖根據媒體查詢填寫數據,但我還沒有到位的元素,並且在某些元素中加入了一些虛假數據來做出此決定似乎很「黑客」。 – freddylindstrom 2011-03-28 15:57:55
當某個寬度(作爲臨時度量)被觸發時,您可以將某個容器/ DIV的背景/邊框設置爲鮮紅色? – Dan 2011-04-07 05:15:16