Question

我发现使用 srcset ＆amp; sizes 属性是我的最佳选择。我的问题是有多少视口是最好的支持？写完之后看起来很多，但是如果浏览器会选择最好的，而其他的没有加载，为什么不做一堆，这样我就可以为1x和2x用户提供最佳体验？我还应该考虑1.5倍和3倍用户吗？我只包括我想要的1倍尺寸。你可以想象如果我添加1.5倍，2倍和3倍的大小，这个列表将会非常长。这是一个例子：

<img src="image-320.jpg" sizes="100vw"
 srcset="image-320.jpg 320w, image-480.jpg 480w,
         image-768.jpg 768w, image-960.jpg 960w,
         image-1024.jpg 1024w, image-1280.jpg 1280w,
         image-1366.jpg 1366w, image-1680.jpg 1680w,
         image-1920.jpg 1920w, image-2048.jpg 2048w,
         image-2560.jpg 2560w, image-2880.jpg 2880w" alt="...">

在开始之前，我对最佳实践感到好奇，如果我正在以正确的方式看待这个问题。谢谢！

Answer 1

我一直在寻找相同的答案，并偶然发现了这篇文章。这些建议基于经验数据，并且偏向全幅图像，但是确实为确定我们应该支持的尺寸提供了一个很好的起点。

https://medium.com/hceverything/applying-srcset-choosing-the-right-sizes-for-responsive-images-at-different-breakpoints-a0433450a4a3

对于func filteredPillData(filteredOption: [String : [String]]) { DispatchQueue.global(qos: .userInitiated).async { self.filteredData.removeAll() for i in 0..<self.pillMap[1]!.count{ let data: MFTemporaryPillModel = self.pillMap[1]![i] if (filteredOption["score"]?.contains(data.pillFrontScore))! && (filteredOption["color"]?.contains(data.pillFrontColor))! && (filteredOption["form"]?.contains(data.pillForm))! && (filteredOption["shape"]?.contains(data.pillShape))! { self.filteredData.append(data) self.mMFSearchPillMainView.mMFSearchPillView.mMFDisplayPillDataCollection.pillDataArray = self.filteredData } } DispatchQueue.main.async { self.mMFSearchPillMainView.mMFSearchPillView.mMFDisplayPillDataCollection.collectionView.reloadData() }视口，本文建议以下尺寸：

1920像素（包括FullHD屏幕及以上）
1600像素（这将涵盖1600像素的台式机和几种纵向模式的平板电脑，例如宽度为768像素的iPad，将要求2x的图像为1536像素及以上）
1366px（这是最广泛的桌面分辨率）
1024像素（1024x768的屏幕，不包括那些无论如何都是高密度的iPad都比较少见，但我认为您需要在两者之间留一些图像尺寸，以免像素尺寸之间留有太大的差距，以防市场变化） li>
768px（适用于2个375px的移动屏幕，以及任何实际请求接近768px的设备）
640像素（适用于智能手机）

顺便说一句，我还发现以下文章对于理解这一切非常有用：

https://www.html5rocks.com/en/mobile/high-dpi/

我想知道您是否遇到过查询的答案？

多少视口大小太多了？

1 个答案: