根据屏幕尺寸替换 HTML

我试图在小屏幕尺寸下替换 HTML 内容，然后在窗口再次变大时替换它。我下面的代码可以工作，但是我如何让它删除更改？

到目前为止，这是我的代码：

$(window).resize(function() {
    if (window.innerWidth < 480) {

        $('.LatestNews').replaceWith('<h3><a href="">News Link</a></h3>');

    } else if (window.innerWidth > 480) {

        // Change back to original .LatestNews

    }
}).resize();

Thanks.

我建议看一下响应js.com。它提出了一些基于视口替换内容的好方法，并且是解决此问题的优雅解决方案。

您要做的第一件事是定义断点。像这样的事情会起作用：

   (function() {

            Response.create({ mode: 'markup', prefix: 'r', breakpoints: [0,320,481,641,961,1020,1281] });
            Response.create({ mode: 'src',  prefix: 'src', breakpoints: [0,320,481,641,961,1020,1281] });

   })();

接下来，您可以使用它的自定义数据属性将您的内容放入标记中。例如

<div data-r481="
     This content will be shown over 480 pixels.
 ">
 This is your default content
 </div>

这更加语义化，因为您可以在标记中拥有这两个版本，而不是使用 JS 来创建它们。

请参阅文档以获取更多信息。