如果查询稍后覆盖它，CSS 媒体查询图像仍然加载吗？

Question

假设我们有一个 css 样式表，它在 div

上规定了以下内容

.my_div{
    background-image: url(../some/image.png);
}

然后，对于移动设备，我们有另一个覆盖它的样式表:

@media (max-width: 400px){

    .my_div{
        background-image: none;
        background-color: rgb(12, 13, 14);
    }
}

如果设备满足 @media (max-width) 查询，../some/image.png 是否仍会加载？

Answer 1

还没有测试过，但是是的，理论上它会加载，然后如果满足媒体查询就会被覆盖。如果您尝试进行“移动优先”设计，请考虑更改顺序。请记住，CSS 是级联的，非常讲究顺序:

.my_div {
    /* load this first for "mobile" */
    background-image: none;
    background-color: rgb(12, 13, 14);
}

/* and then this for desktop, notice "min-width" instead of max-width */
@media (min-width: 400px) {
   .my_div{
       background-image: url('../some/image.png');
     }
}

This article是一本关于逻辑的好书。