2013-07-25 47 views
2

我剛剛開始使用response.js,但是通過閱讀示例,我瞭解到需要做的就是添加與默認斷點相對應的特定數據屬性。如果那是真的,爲什麼我的簡單例子不工作?它保持默認標記。我想我錯過了一些東西。response.js沒有觸發斷點

<!DOCTYPE html> 

    <html> 

    <head> 
    <meta charset="utf-8"/> 
    <title></title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="response.min.js"></script> 
    </head> 

    <body data-responsejs='{ 
    "create": [{ 
     "prop": "width" 
     , "prefix": "min-width- r src" 
     , "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] 
    }] 
}'> 

    <div data-r320="markup @ 320+" data-r961="markup @ 961+">default</div> 

    </body> 


    </html> 

編輯:

我不認爲這些斷點默認設置,所以我用JSON的方法來創建它們。現在什麼都沒有顯示。

回答

0

我在找到response.js幫助文檔也比清除還要少。經過大量的試驗和錯誤,我有以下工作......希望這有助於!在你的代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Response JS viewport test</title> 
<meta name=viewport content="width=device-width,initial-scale=1"> 

</head> 

<body data-responsejs='{ 
"create": [ 
    { "prop":"width", "prefix": "min-width-", "lazy":true } 
]}' 
> 

<noscript>no-js</noscript> 





<!-- Response.js (ResponseJS.com) uses [0, 320, 481, 641, 961, 1025, 1281] as default --> 


    <div class="min-width" 
     data-min-width-0=" viewport width is 0+" 
     data-min-width-320="viewport width is 320+" 
     data-min-width-481="viewport width is 481+" 
     data-min-width-641="viewport width is 641+" 
     data-min-width-961="viewport width is 961+" 
     data-min-width-1025="viewport width is 1026+" 
     data-min-width-1281="viewport width is 1281+" 

    > 
     <strong>fallback</strong> content</div> 

    </div> 




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="response.js"></script> 
</body> 
</html> 

編輯
看再說,我有這個變化的工作,以及:

<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"/> 
<title></title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="response.min.js"></script> 
</head> 

<body data-responsejs='{ 
    "create": [ 
     { "prop": "width" 
     , "prefix": "min-width-" 
     , "lazy": true 
     , "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
    ]}' 
> 

<div data-min-width-320="markup @ 320+" 
    data-min-width-961="markup @ 961+" 
    > 
    default</div> 

</body> 


</html>