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 回答