Jquery response.js未在断点处触发
我只是从response.js开始,但我从阅读示例中了解到,只需添加与默认断点对应的特定数据属性。如果这是真的,为什么我的简单示例不起作用?它保持默认标记。我想我错过了什么Jquery response.js未在断点处触发,jquery,responsive-design,Jquery,Responsive Design,我只是从response.js开始,但我从阅读示例中了解到,只需添加与默认断点对应的特定数据属性。如果这是真的,为什么我的简单示例不起作用?它保持默认标记。我想我错过了什么 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script src="//ajax.googleapis
<!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方法来创建它们。现在它什么也没显示。我发现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>
响应JS视口测试
没有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-"
, "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>
违约