jquery - 如何进行响应式图像设计

Question

我有以下代码来在桌面上显示图像。

<div class="medium-5 large-12 columns">
  <img style="padding-top: 20px;padding-left:30px" src="~/assets/img/ty-desktop.png" alt="Back" />      
</div>

在 iPad 中查看同一网页时，我需要显示不同的图像 <div> 。

我怎样才能做到这一点？

我尝试更改class = "medium- 4"但图像没有调整其大小并丢失像素。所以我为 iPad 创建了新图像，我需要加载该图像。

Answer 1

一种方法是默认隐藏 ipad 图像，并使用您想要定位 ipad 设备的媒体查询启用它。

这里是针对各种设备/方向的媒体查询的资源。 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

.iPad {
  display: none;
}

/* replace with media query for ipad */
@media (max-width:800px) {
  .desktop {
    display: none;
  }
  .iPad {
    display: block;
  }
}

<div class="medium-5 large-12 columns">
  <img style="padding-top: 20px;padding-left:30px" src="http://kenwheeler.github.io/slick/img/fonz2.png" alt="Back" class="desktop" /> 
  <img style="padding-top: 20px;padding-left:30px" src="http://kenwheeler.github.io/slick/img/fonz3.png" alt="Back" class="desktop iPad"/>
</div>