2013-07-25 4 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> 
관련 문제