1

我读了一篇关于srcset：解释 src-n 语法的最后一个子句的文章。在这篇文章中，有一个例子来解释复杂的。srcset这里是它的一部分：

它表示您的布局有两个断点，分别位于 640 像素和 960 像素，您的布局会发生变化。在最小的布局中，此图像将以 100% 的视口宽度呈现，接下来是 50%（可能是两列设计），在最大的布局中，它将是 33%（三-立柱设计）。

接下来作者给出了上述条件的代码演示，用 using 表示srcset：

<img srcset="
 320.jpg .89x 400w, 480.jpg 1.33x 400w, 640.jpg 1.78x 400w,
 480.jpg 1.04x 520w, 640.jpg 1.39x 520w, 960.jpg 2.09x 520w,
 640.jpg 1.1x 639w, 960.jpg 1.66x 639w, 1280 2.2x 639w,
 320.jpg 0.89x 800w, 480.jpg 1.33x 800w, 640.jpg 1.78x 800w,
 480.jpg 1.09x 959w, 640.jpg 1.45x 959w, 960.jpg 2.18x 959w,
 320.jpg 0.89x 1200w, 480.jpg 1.33x 1200w, 640.jpg 1.78x 1200w,
 480.jpg 1.09x 1440w, 640.jpg 1.45x 1440w, 960.jpg 2.18x 1440w,
 480.jpg 0.86x 1920w, 640.jpg 1.14x 1920w, 960.jpg 1.71x 1920w, 1280 2.29x 1920w,
 640.jpg 0.86x, 960.jpg 1.29x, 1280 1.71x, 1920 2.57x
">

但是，我无法弄清楚作者是如何计算所有东西的，比如.89, 1.04, 1.1. 这些像素密度是如何计算出来的？在上面的描述中，只有两个断点：960pxand 640px，那么另一个400w, 520w,是怎么639w出来的呢？

4

1 回答 1

0

不喜欢将“x”与“w”混合的想法。甚至可能是一个禁忌，但不能说我已经检查过。

我最近也在研究 srcset 。那里有很多令人困惑和矛盾的东西。我想出的漂亮且易于查找的解决方案非常易于实施，并且似乎符合我的要求，如下所示。（不确定这种方法是否有任何问题，毫无疑问会有，但还不知道。）

笔记：

1) 我只是给浏览器列表提供了 21 个可能的图像以及它们的宽度。2) 'sizes' 属性在 537px、639px 等处有我的 CSS 断点，我希望图像显示 300px、350px 等的实际大小。 3) 通过在 Chrome 中通过缩放或将像素密度从 1x 更改为 2x、4x 进行模拟, 8x 它总是为工作选择最佳图像（例如，2x 像素密度的 480'CSS px' 宽显示器将选择 640w 图像来填充 300'CSS px' 图像元素。4）几句警告。不要在 CSS 或 HTML 的其他地方包含任何其他图像大小。5) 并非所有浏览器的行为都相同。有些要么还没有实现 srcset 要么只有部分实现。我喜欢认为 Chrome 是正确的，其余的都会效仿。

          <img
            src="pictures/default.jpg"
            srcset="pictures/Pic_a35_4_3_80.jpg 80w,
                    pictures/Pic_a35_4_3_95.jpg 95w,
                    pictures/Pic_a35_4_3_113.jpg 113w,
                    pictures/Pic_a35_4_3_134.jpg 134w,
                    pictures/Pic_a35_4_3_160.jpg 160w,
                    pictures/Pic_a35_4_3_190.jpg 190w,
                    pictures/Pic_a35_4_3_226.jpg 226w,
                    pictures/Pic_a35_4_3_269.jpg 269w,
                    pictures/Pic_a35_4_3_320.jpg 320w,
                    pictures/Pic_a35_4_3_381.jpg 381w,
                    pictures/Pic_a35_4_3_453.jpg 453w,
                    pictures/Pic_a35_4_3_538.jpg 538w,
                    pictures/Pic_a35_4_3_640.jpg 640w,
                    pictures/Pic_a35_4_3_761.jpg 761w,
                    pictures/Pic_a35_4_3_905.jpg 905w,
                    pictures/Pic_a35_4_3_1076.jpg 1076w,
                    pictures/Pic_a35_4_3_1280.jpg 1280w,
                    pictures/Pic_a35_4_3_1522.jpg 1522w,
                    pictures/Pic_a35_4_3_1810.jpg 1810w,
                    pictures/Pic_a35_4_3_2153.jpg 2153w,
                    pictures/Pic_a35_4_3_2560.jpg 2560w"
            sizes="(max-width: 537px) 300px,
                   (max-width: 639px) 350px,
                   (max-width: 759px) 400px,
                   (max-width: 904px) 450px,
                   (max-width: 1279px) 500px,
                   550px"
            alt="Pic_a35_4_3">
          </img>
于 2015-04-15T16:37:52.053 回答