前端图片适配不同屏幕方案

news2024/11/25 16:49:34

预备知识：

设备独立像素,以下图的iphone12 Pro为例，390*844表示的就是设备独立像素（DIP）,也可以理解为CSS像素
在这里插入图片描述

物理像素（设备像素），就是屏幕的分辨率，显示屏就是由一个个物理像素点组成的；
DPR（Device Pixel Ratio）设备像素比，DPR = 物理像素 / 设备独立像素

在同样的css像素大小下，屏幕有不同的dpr,同样大小的图片渲染出来的效果会不一样；因此，为了在不同的 DPR 屏幕下，让图片看起来都不失真，我们需要为不同 DPR 的图片，提供不同大小的图片。有以下几个方案

方案一：媒体查询
通过相应的媒体查询，得知当前的设备的 DPR 值，使用对应的图片

 #image {
     background: url(xxx@1x.png)
 }
 @media (device-pixel-ratio: 2) {
     #image {
         background: url(xxx@2x.png)
     }
 }
 @media (device-pixel-ratio: 3) {
     #image {
         background: url(xxx@3x.png)
     }
 }

缺点：

可能存在一些介于 1和2，2和3 之间的 DPR 值，匹配不到对应的
注意：
需要注意语法需要的兼容性，需要添加前缀，譬如 -webkit-min-device-pixel-ratio，可以由 autoprefixer 插件解决

方案二：CSS 配合 image-set 语法
image-set 属于 CSS background 中的一种语法，image-set() 函数为设备提供最合适的图像分辨率，它提供一组图像选项，每个选项都有一个相关的 DPR 声明，浏览器将从中选择最适合设备的图像进行设置。

 #imgage {
     /* 不支持 image-set 的浏览器*/
     background-image: url('xxx@1x.png');
     /* 支持 image-set 的浏览器*/
     background-image: image-set(
         url('xxx@2x.png') 2x,
         url('xxx@3x.png') 3x
     );
 }

缺点：

和方案一一样

方案三：srcset 配合像素密度描述符
img标签的srcset属性可以根据不同的 dpr 拉取对应尺寸的图片

 <div class='image'>
    <img src='xxx@1x.png'
        srcset='xxx@2x.png 2x,
                xxx@3x.png 3x'
    >
 </div>

上面 srcset 里的 2x,3x 表示像素密度描述符，当屏幕的 dpr = 2 时，使用 xxx@2x.png.png 这张图,以此类推
缺点：

和方案一一样

方案四：srcset 属性配合 sizes 属性 w 宽度描述符
上述 3 种方案都存在统一的问题，只考虑了 DPR，但是忽略了响应性布局的复杂性与屏幕的多样性；
srcset 属性还有一个 w 宽度描述符，配合 sizes 属性一起使用，可以覆盖更多的面；
sizes定义图像元素在不同的视口宽度时，可能的大小值；

<img
         sizes = “(min-width: 600px) 600px, 300px"
         src = "xxx.png"
         srcset = “xxx@1x.png 300w,
                        xxx@2x.png 600w,
                        xxx@3x.png 1200w,
 >

sizes = “(min-width: 600px) 600px, 300px” 的意思是：

如果屏幕当前的 CSS 像素宽度大于或者等于 600px，则图片的 CSS 宽度为 600px
反之，则图片的 CSS 宽度为 300px
srcset = “photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w 里面的 300w，600w，900w 叫宽度描述符。

示例：
当前屏幕 dpr = 2 ，CSS 宽度为 375px。
当前屏幕 CSS 宽度为 375px，则图片 CSS 宽度为 300px（因为sizes定义了最小宽度，屏幕375px小于600px，所以图片的CSS宽度为300px）。分别用上述 3 个宽度描述符的数值除以 300。

300 / 300 = 1
600 / 300 = 2
1200 / 300 = 4
上面计算得到的 1、 2、 4 即是算出的有效的像素密度，换算成和 x 描述符等价的值。这里 600w 算出的 2 即满足 dpr = 2 的情况，匹配到xxx@2x.png这张图。

示例：
当前屏幕 dpr = 3 ，CSS 宽度为 414px。
当前屏幕 CSS 宽度为 414px，则图片 CSS 宽度仍为 300px

300 / 300 = 1
600 / 300 = 2
1200 / 300 = 4
dpr = 3，2 不满足，因此匹配到 1200w 这张图。

JavaScript 方案实现图片的懒加载

通过 JavaScript 实现的懒加载，主要是两种方式：

监听 onscroll 事件，通过 getBoundingClientRect API 获取元素图片距离视口顶部的距离，配合当前可视区域的位置实现图片的懒加载
通过 HTML5 的 IntersectionObserver API，Intersection Observer（交叉观察器）配合监听元素的 isIntersecting 属性，判断元素是否在可视区内，能够实现比监听 onscroll 性能更佳的图片懒加载方案
还有一种是类似于懒加载的方式，类似于虚拟列表
使用 content-visibility: auto 实现图片内容的延迟渲染

<template>
  <div class="card">
    <div class="img-container">
      <img class="img" :src="props.url" />
    </div>
    <div class="title">{{ props.title }}</div>
    <div class="area">{{ props.area }}</div>
    <div class="collect">{{ props.collect }}人想要</div>
    <div class="price">
      ￥<span class="amount">{{ props.price }}</span>
    </div>
  </div>
</template>

<style>
.card {
  content-visibility: auto;
}
</style>