如何为所有设备编写响应式CSS？

Question

您好我需要编写支持所有设备的css。这不是一个新问题，但我仍然感到困惑该怎么做。 我试过像这样的媒体查询

@media screen and (device-width:1080px)
{
    div::before
    {
        content: url('6plus.jpg');
    }
}
@media screen and (device-width:750px)
{
    div::before
    {
        content: url('6.jpg');
    }
}

以上代码与设备宽度有关。这看起来不错，但是当我为所有设备设计时，这会占用大量时间。我对min,max in media query and -webkit-min-device-pixel-ratio感到困惑。我正在尝试使用iphone 6和6plus分辨率的图像。我应该使用什么图像以及解决方案应该是什么。 我怎样才能以更好的方式使用媒体查询来支持所有设备。有人能帮我吗？