Modernizr + Yepnope + FitText（不同視角的不同字體大小/縮放比例）

Question

首先，我是垃圾JS - 一個新手。

我想要做的是不同的FitText（jquery.fittext.js）縮放不同的設備寬度。因此，例如：

$("#hometitle").fitText(1.1); // for mobile 

$("#hometitle").fitText(1.2); // for medium screen 

$("#hometitle").fitText(1.2); // for large screen 

我明白，我可以使用YepNope像這樣（在我的HTML文檔的底部）：

$(document).ready(function() { 
    { 
     $("#hometitle").fitText(1.2); 
    } 
}); 

：

<script type="text/javascript"> 
Modernizr.load([ 
    { 
     test: Modernizr.mq('(max-width:600px)'), 
     yep: '{js_path}mobile.js' 
    } 
]); 
</script> 

內mobile.js我有這個

然後

我想（絕望！）知道[a]我是否得到上面的代碼？和[b]如何將三個寬度的附加測試添加到YepNope代碼（上面）中。

對不起，用JS沒用！並有一個需要儘快利用這個項目。

（旁註：Modernizr的是加載在頭部，並在頁面的我YepNope代碼jQuery和fittext前下方加載中）

提前感謝！

Answer 1

對我來說，你似乎是在正確的軌道。使用yepnope.js和modernizr來製作polyfills。

雖然缺少了一些東西，比如先檢查瀏覽器是否支持媒體查詢，以及在查詢中使用設備類型。通過最小寬度和最大寬度來指定範圍也是一個好主意，因爲如果不這樣做，測試條件可能會加載多個JavaScript文件。

至於多個條件，你可以做這樣的事情，

Modernizr.load([ 

    { 
     test: Modernizr.mq("only all"), 
     nope: 'testnope.js'// this is to check if media queries are supported at all 
    }, 

    { 
     test: Modernizr.mq("only screen and (min-width: 960px) and (max-width:1440px)"), 
     yep: 'test3.js' 
    }, 

    { 
     test: Modernizr.mq("only screen and (min-width: 768px) and (max-width: 959px)"), 
     yep: 'test2.js' 
    }, 

    { 
     test: Modernizr.mq("only screen and (min-width:480px) and (max-width:767px)"), 
     yep: 'test1.js' 
    }, 

    { 
     test: Modernizr.mq("only screen and (max-width:479px)"),//smallest screen 
     yep: 'test0.js' 
    } 
]); 

希望這有助於。