2

私は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 メソッドを使用して作成しました。今は何も表示されません。

4

1 に答える 1

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>
于 2013-07-27T19:40:30.287 に答える