0

我正在为响应式网页设计设置图像，并采用最近正式化的响应式图像语法。我没有使用所有方面，只是 srcset 和 sizes 部分。粗略地说，我的标记如下：

<img src="/image.jpg" alt="my alt text"
    srcset="
        /image-sm.jpg 320w,
        /image-md.jpg 480w,
        /image-lg.jpg 600w,
        /image-xl.jpg 742w"
    sizes="
        (min-width: 992px) 742px,
        (min-width: 768px) 582px,
        (min-width: 600px) 441px,
        (min-width: 480px) 599px,
        (min-width: 321px) 479px,
        320px"
>

我的设计是以移动优先的方式构建的。所以我的问题是：

媒体查询的顺序对浏览器选择哪个图像有任何影响吗？

如您所见，我让它们从最大断点变为最小，因为默认大小很小，而且我看到的所有语法示例都将默认大小放在最后。但这与我的主要 CSS（通过 SASS 编译）形成对比，后者也使用最小宽度媒体查询，我（正确地）首先有最小的断点。

我也应该在这个标记中首先使用较小的断点吗？还是在图像标记上下文中没有区别？

4

1 回答 1

0

顺序很重要。在 CSS 中，如果它们具有相同的特性，则后面的规则会覆盖先前的规则。这可能会导致结果，即后来的 CSS 覆盖了之前的 CSS。

在 resp 图像的上下文中，采用与媒体条件匹配的第一个尺寸值。这可能会导致相反的排序效果。

这意味着如果您使用最小宽度，您的尺寸列表只有在从较高的最小条件值变为较低值时才有意义（您的示例）。

如果你想反转你的列表（从低到高），你需要使用 max-width 条件来表达相同的 CSS 值。

最后：按照你的意愿去做，但是保持最小宽度条件并且只是反转列表，是行不通的。

最后，对于尺寸，没有移动优先或桌面优先的方法，只有简单的通用方法。

于 2015-03-19T00:37:41.767 回答