根据屏幕大小替换 HTML [英] Replace HTML depending on screen size

问题描述

我正在尝试替换小屏幕尺寸的 HTML 内容，然后在窗口再次变大时替换它.我下面的代码有效，但我如何才能删除更改?

这是我目前的代码:

$(window).resize(function() {如果(window.innerWidth <480){$('.LatestNews').replaceWith('<h3><a href="">新闻链接</a></h3>');} else if (window.innerWidth > 480) {//改回原来的.LatestNews}}).resize();

谢谢.

解决方案

我建议看看 responsejs.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] });})();

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

Thanks.

解决方案

I would recommend having a look at responsejs.com. It comes up with some great ways of substituting content based on view-port and is an elegant solution to this problem.

The first thing you'd want to do is define your breakpoints. Something like this would work:

   (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] });

   })();

Next you can just use it's custom data attribute to place in your content in the markup. e.g.

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

This is far more semantic as you can have both versions in your markup instead of using JS to create them.

See the documentation for more info.

这篇关于根据屏幕大小替换 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！