Question

我正在构建我的第一个网站，现在主要使用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代码。我想为每个＆＃34;媒体查询＆＃34;添加不同的图像，这样对于低于1200px宽度的屏幕，将出现一个图像，另一个用于宽度超过1200px的屏幕。

我该怎么做？

非常感谢！

Answer 1

您可以做的是将所有图片放在 HTML 内容中，然后在每个 CSS 文件中，您可以使用display: none;来切换图像可见性，具体取决于屏幕宽度。

jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

我建议在响应式图片上阅读这一系列精彩帖子： http://blog.cloudfour.com/responsive-images-101-definitions/

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

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

使用媒体查询更改HTML？

2 个答案: