W3C校验img元素sizes属性报错但Chrome运行正常，如何解决？

W3C标准中img标签的sizes属性每一项的语法规则为「媒体查询条件 + 空格 + 长度值」，你当前的代码里媒体查询括号和后面的长度值100vw、45vw之间没有空格，不符合语法规范。Chrome浏览器对这类格式错误做了容错处理，所以实际运行表现正常，但严格的W3C校验器会抛出错误。

• 方案1：直接补充缺失的空格，修改sizes属性为如下内容即可通过校验：

sizes="(max-width:768px) 100vw, (min-width: 768px) 45vw"

• 方案2：优化冗余的媒体条件，sizes属性的最后一项可以省略媒体查询条件，默认作为所有不满足前面条件的场景的取值，写法更简洁：

sizes="(max-width:768px) 100vw, 45vw"

内容的提问来源于stack exchange，提问作者Sascha Grindau