根据屏幕尺寸替换HTML [英] Replace HTML depending on screen size

问题描述

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

I am trying to replace HTML content in small screen size and then replace it when the window is made larger again. My code below works but how do i get it to remove the change?

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

Here is my code so far:

$(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();

谢谢.

推荐答案

我建议您看看 responsejs.com .它提出了一些基于视口的替代内容的好方法，并且是解决此问题的理想方法.

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>

这具有更多的语义，因为您可以在标记中同时使用两个版本，而不必使用JS来创建它们.

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屋！