使用媒体查询更改 HTML？答案

【问题标题】：Changing HTML with media queries?使用媒体查询更改 HTML？
【发布时间】：2016-02-10 05:18:14
【问题描述】：

我正在构建我的第一个网站，目前主要使用 HTML 和 CSS。为了调整我的网站以适应大屏幕（台式电脑）以及平板电脑和手机，我使用 媒体查询 将我的 HTML 页面链接到不同的样式表。例如：

<head>
    <link rel="stylesheet" type="text/css" href="desktop_css.css" media="(min-width: 1200px)">
    <link rel="stylesheet" type="text/css" href="phone_css.css" media="(max-width: 1200px)">
</head>

这真的很好，但我还需要更改我的 HTML 代码。我想为每个“媒体查询”添加不同的图像，这样对于宽度小于 1200 像素的屏幕会出现一个图像，而宽度超过 1200 像素的屏幕会出现另一个图像。

我该怎么做？

非常感谢！

【问题讨论】：

标签： html css

【解决方案1】：

您可以做的是在 HTML 内容中包含所有图像，然后在每个 CSS 文件中，您可以使用 display: none; 根据屏幕切换图像可见性 -宽度。

jsfiddle

@media screen and (max-width: 1200px) {
   #img1 {
      display: none;
   }
}
@media screen and (min-width: 1200px) {
   #img2 {
      display: none;
   }
}

<div>
  <img id="img1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS0Dav0HDgMJbLCtT-V5EtyNf76ZO5O8SSx_f3Xs-hM_hNvYL6vwnvJ9g" />
  <img id="img2" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTmp65xRN2P3FI_nzAj06DyQ_qIsYF3SIvZfdIRFkTlR7EF734x" />
</div>

因此，在您使用外部 CSS 文件的情况下，您可以将包含 #img1 {display: none;} 的 MediaQuery 放在 phone_css.css 中，然后将包含 #img2 {display: none;} 的 MediaQuery 放在 desktop_css.css 中

【讨论】：

很好的答案！非常感谢。
请注意，大多数浏览器仍会下载这两个图像。这是使用srcset 或<picture> 更可取的主要原因之一。上面的答案在技术上可以满足您的需求，但恕我直言，这不是最佳实践。

【解决方案2】：

我建议您阅读关于响应式图像的精彩系列文章： http://blog.cloudfour.com/responsive-images-101-definitions/

它很好地描述了执行此操作的两种主要方法：srcset 和 <picture>。

如果您关心跨浏览器支持，我建议您使用 Picturefill： https://scottjehl.github.io/picturefill/

【讨论】：

感谢您的回答，我会查看源代码以获取更多信息:)