我建议看一下响应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 来创建它们。
请参阅文档以获取更多信息。