移动首先设计，加载图像和jquery DOM选择

Question

我正在尝试以移动优先的方式进行网站设计。作为其中的一部分，我使用媒体查询来检测超过768px的屏幕宽度

@media only screen and (min-width: 768px)

这会触发通过CSS

加载的图像

h1:before{content: url(../static/logo.png)" ";}

现在，当这个图像加载时，我想把它作为一个超链接。由于我已在其他地方使用jquery，我认为最简单的方法是选择DOM中的图像并向对象添加超链接元素。但是，在我看来，图像没有出现在DOM中，因为我使用CSS加载图像（我不确定它是否是伪元素的事实有所不同）。

在移动优先策略中加载对象（图像）和应用标记的有效策略是什么？ 谢谢！

Answer 1

只需使用jQuery将图像和链接插入DOM。

if ($(window).width() > 768) {
    $('h1').before('<a href="#"><img src="images/logo.jpg" /></a>');
}

Answer 2

您无法选择或操纵使用:before或:after添加的 伪 元素。它们根本不会出现在DOM中。来自the Generated content spec：

  

生成的内容不会改变文档树。特别是，它不会反馈给文档语言处理器（例如，用于重新分析）。

请参阅this example at jsFiddle。

---

使用jQuery添加图像和链接 - 就像在Rusty Jeans的回答中一样 - 是一个很好的方法。

如果你担心调整大小，那么CSS方法会给你带来的最大好处就是即使JS被禁用，图像也会显示/隐藏。为了“链接”它，您将需要监视resize事件，无论如何。 （如果出于某种原因调整大小确实是个大问题。）

如果是我，我会使用真正的HTML - 一个预先链接的图像 - 而不是伪元素。使用媒体查询驱动的CSS完全显示或隐藏这些节点（display:none等）。

另一种方法是通过CSS添加图像，以便禁用JS的浏览器可以在时尚之后运行。 但是，然后使用JS删除CSS，伪元素并添加带有链接的真实元素。也就是说，“渐进式增强”方法。

---

:before和:after内容用于表示目的，而非结构性功能元素。