图像在移动端的自适应

前端

2023-12-14 04:04:25

引言

在当今移动互联网时代，图片作为重要的视觉元素，在网站和应用程序中扮演着至关重要的角色。然而，由于移动设备屏幕尺寸的多样性，图片在不同设备上的显示效果存在着巨大的差异。为了解决这一问题，移动端图片适配应运而生。

图片模糊的原因

我们平时使用的图片大多数都属于位图（png、jpg...），位图由一个个像素点构成的，每个像素都拥有特定的位置和颜色值：

理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，也就是说，图片的实际尺寸和屏幕上显示的尺寸是一致的。
但是，在移动设备上，由于屏幕分辨率的限制，一个物理像素可能需要渲染多个位图像素，这就会导致图片模糊。

移动端图片适配的原理

移动端图片适配的原理是根据设备的屏幕尺寸动态加载不同尺寸的图片，从而保证图片在不同设备上都能清晰显示。

实现方法

1. HTML

通过<picture>标签包裹<img>标签，<source>标签指定不同尺寸的图片。
浏览器会根据设备的屏幕尺寸选择合适的<source>标签加载图片。

<picture>
  <source srcset="small.jpg" media="(max-width: 480px)">
  <source srcset="medium.jpg" media="(max-width: 768px)">
  <source srcset="large.jpg">
  <img src="large.jpg" alt="Example">
</picture>

2. CSS

使用@media查询根据屏幕尺寸加载不同的图片。

@media (max-width: 480px) {
  img {
    content: url(small.jpg);
  }
}

@media (max-width: 768px) {
  img {
    content: url(medium.jpg);
  }
}

3. JavaScript

使用JavaScript动态加载图片。

const img = document.createElement('img');
const src = `image-${window.innerWidth}.jpg`;
img.setAttribute('src', src);
document.body.appendChild(img);