Question

我刚刚开始使用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方法创建它们。它现在什么也没有显示。

Answer 1

我发现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>

response.js没有在断点处触发

1 个答案: