我正在與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>
你是什麼意思,它不工作?如果你檢查'.title'元素,你會看到'.big'類按預期添加(如果你的屏幕是匹配的大小)。 –