如何根据屏幕尺寸预加载图像

Question

我想根据屏幕尺寸预加载图像，所以我使用：

<link rel="preload" as="image" href="/imagemax.png" media="(min-size:800px)" >
<link rel="preload" as="image" href="/imagemed.png" media="()" >
<link rel="preload" as="image" href="/imagemin.png" media="(max-size:599px)">

我不确定如何预加载中型图像。我见过的所有示例仅涉及最小和最大屏幕尺寸，而不是中间值。当屏幕

>599px

和

<800px

时如何触发预加载？

Answer 1

你可以试试这个代码。

<link rel="preload" as="image" href="/imagemed.png" media="(min-size:800px) and (max-size: 599px)">

使用“和”它将定位屏幕最大和最小宽度之间的宽度。