Алексей Струков

Бери одну картинку, размером "требуемая максимальная ширина экрана помноженная на два" и делай ее. Это самый простой вариант. Если хочется немного пооптимизировать, то бери две картинки - одна большая как в первом случае, а вторая - в два раза меньше. Оптимизировать отдельно для каждого устройства не обязательно - на скорость загрузки это особо не влияет. Картинки только не забудь сжать оптимизатором)

Судя по всему, ты хочешь первый экран сделать с большой картинкой на всю ширину. Тогда ставь ее через background-image и медиа-запросы. В общем все)

Ретина только на картинки влияет, делая их размыленными. Самый простой способ - бери все изображения с увеличенным в 2 раза размером.
Например нужна картинка 100 на 100 пикселей на сайте - бери картинку 200 на 200 и указывай ей размер в css 100x100.
Таким образом ты заставишь ретина-дисплей отображать картинку с двойной плотностью пикселей.

Есть еще экраны с х3 или х4 плотностью, но я не замечал стлной разницы в качестве изображений на них, так что можно забить.

Если хочешь немного увеличить производительность и скорость загрузки сайта - можешь определять плотность пикселей и выдавать под ретину большие картинки, а под простые экраны - обычные. Я лично тоже забил на этот геморрой, так как в целом простота поддерживаемости кода и удобство его написания перевешивают плюсы от увеличения производительности.

Так не получится.
После компиляции в CSS все переменные присвоят свои текущие значения свойствам и исчезнут из файла. Соответственно, когда вы будете менять разрешение браузера и начнут срабатывать связанные с этим разрешением медиазапросы, то внутри них уже не будет переменных, которые смогут изменить паддинги и другие свойства.