gpt4 book ai didi

jquery - response.js 没有在断点处触发

转载 作者:行者123 更新时间:2023-12-01 05:54:08 26 4
gpt4 key购买 nike

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

最佳答案

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

关于jquery - response.js 没有在断点处触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17848841/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com