移动优先设计，加载图像和 jquery DOM 选择答案

【问题标题】：Mobile first design, loading images and jquery DOM selection移动优先设计，加载图像和 jquery DOM 选择
【发布时间】：2011-08-26 10:47:39
【问题描述】：

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

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

这会触发通过 CSS 加载图像

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

这当然有效。这是每个人一直告诉我要做的事情。谢谢你的sn-p。我仍然想知道是否有办法通过 CSS 加载图像。一个原因是，如果我这样做，JS 会检查 onload 窗口的大小。除非我在调整窗口大小时编写一些 JS 来检查实际窗口大小，否则这不会像我想的那样顺利喜欢。而且它并没有像我想要的那样保留表示和功能标记的分离。

【解决方案2】：

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

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

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

如果您担心调整大小，CSS 方法给您带来的最大好处是即使 JS 被禁用，图像也会显示/隐藏。为了“链接”它，您需要监视resize 事件，不管怎样。（如果由于某种原因调整大小真的是一个大问题。）

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

另一种方法是通过 CSS 添加图像，以便禁用 JS 的浏览器可以正常工作。但是，然后使用 JS 删除那个 CSS 伪元素并添加一个带有链接的真实元素。也就是“渐进增强”的方法。

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

【讨论】：