有條件的媒體查詢window.matchMedia

我正在與window.matchMedia()，我似乎無法得到應用次要類的功能，當達到max or min width。我通過簡單的字體大小更改重新創建了以下問題。有條件的媒體查詢window.matchMedia

我已閱讀matchMedia()，我試過了這兩種不同的方式（都包括在下面）。我是否需要包含最小值和最大值才能執行該功能？或者我在功能本身的實際結構中遺漏了什麼？

$(document).ready(function() { 
 
\t 
 
\t var mq = window.matchMedia('(max-width: 700px)'); 
 
\t 
 
\t if(mq.matches) { 
 
\t \t $('.title').addClass('big') 
 
\t } else { 
 
\t \t $('.title').removeClass('big'); 
 
\t } 
 
}); 
 

 

 
/* 
 
Second method I tried 
 

 
$(function() { 
 
if(window.matchMedia('(max-width: 700px)').matches){ 
 
\t \t $('.title').addClass('big') 
 
\t } else { 
 
\t \t $('.title').removeClass('big'); 
 
\t } 
 

 
}); 
 

 

 
*/

.title { 
 
\t font-size: 20px; 
 
} 
 

 
.big { 
 
\t font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="title">This is a title</h1>

來源

2017-10-10 Theodore Steiner

你是什麼意思，它不工作？如果你檢查'.title'元素，你會看到'.big'類按預期添加（如果你的屏幕是匹配的大小）。 –

這是工作，也許你期待它來檢測屏幕大小？你有它綁定到document.ready（），所以你必須刷新頁面才能看到它。

試試看：

製作超過700像素較小的窗口，刷新較大
化妝窗口，然後700像素，刷新
注意區別:)

換句話說：

$(document).ready(your function)

你r函數僅在每次加載頁面時執行一次。

或者，使用此fiddle並運行它。使結果窗口大於或小於700px並再次運行。

如果您需要在窗口的寬度調整大小我會建議結合window.onresize我在這個fiddle with execution on resize event

通知做我把那裏的console.log給你看怎樣及何時每次運行它被觸發，你想在生產之前將其刪除;）

來源

2017-10-10 15:06:43 DanteTheSmith

非常感謝。是的，我希望它能夠以與媒體查詢相同的方式檢測調整大小並添加該類。 –

有條件的媒體查詢window.matchMedia

回答

相關問題