如何在移动设备优先的上下文中为 reps.imgs 安排 'sizes' 属性
How to arrange 'sizes' attribute for reps.imgs in a mobile-first context
我正在为响应式网页设计设置图像，并采用最近正式化的响应式图像语法。我没有使用所有方面，只是 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 编译）形成对比，后者也使用最小宽度媒体查询，其中我（正确地）将最小的断点排在第一位。
我是否也应该在此标记中首先设置较小的断点？或者它在图像标记上下文中没有区别？
顺序很重要。在 CSS 中，如果后面的规则具有相同的特异性，它们会覆盖前面的规则。这可能会产生这样的结果，即后来的 CSS 覆盖了先前的。
在 resp 图像的上下文中，采用第一个尺寸值，这与媒体条件相匹配。这可能会导致相反的排序效果。
这意味着如果您使用最小宽度，则只有当它从较高的最小条件值变为较低的值（您的示例）时，您的尺寸列表才有意义。
如果你想反转你的列表（从低到高），你需要使用最大宽度条件来表达相同的 CSS 值。
最后：随心所欲，但保持最小宽度条件并仅反转列表是行不通的。
最后，对于尺寸，没有移动优先或桌面优先的方法，只有简单的通用方法。
我正在为响应式网页设计设置图像，并采用最近正式化的响应式图像语法。我没有使用所有方面，只是 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 编译）形成对比，后者也使用最小宽度媒体查询，其中我（正确地）将最小的断点排在第一位。
我是否也应该在此标记中首先设置较小的断点？或者它在图像标记上下文中没有区别？
顺序很重要。在 CSS 中，如果后面的规则具有相同的特异性，它们会覆盖前面的规则。这可能会产生这样的结果，即后来的 CSS 覆盖了先前的。
在 resp 图像的上下文中，采用第一个尺寸值，这与媒体条件相匹配。这可能会导致相反的排序效果。
这意味着如果您使用最小宽度，则只有当它从较高的最小条件值变为较低的值（您的示例）时，您的尺寸列表才有意义。
如果你想反转你的列表（从低到高），你需要使用最大宽度条件来表达相同的 CSS 值。
最后：随心所欲，但保持最小宽度条件并仅反转列表是行不通的。
最后，对于尺寸，没有移动优先或桌面优先的方法，只有简单的通用方法。