CSS媒体查询加载顺序

Question

我想知道当我放置代码结构时会发生什么，如下所示。 iPad用户是否加载＆＃34; stripes.png ＆＃34;和然后＆＃34; stripes-X2.png ＆＃34;这样吗？

div.stripes {

    background: url("stripes.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

    div.stripes {

        background: url("stripes-X2.png");
    }

}

如果是这种情况，这是否是一个更好的选择，以确保每个设备只为自己加载适当版本的图像？

@media (-webkit-min-device-pixel-ratio: 1), (max-resolution: 191dpi) { 

    div.stripes {

        background: url("stripes.png");
    }

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

    div.stripes {

        background: url("stripes-X2.png");
    }

}