Евгений Петров

1. Плохое решение — не нужно загружать ненужные изображения.

2. Тоже не ахти. Генерацией путей, в общем случае, не следует управлять на фронтенде. И, опять же, будете грузить все изображения слайдера. Представляйте для таких ситуаций слайдер с сотней изображений.

3. Верное решение. Причём, если речь идёт о слайдере, то все пути записаны в data-атрибуты. Для появления нужного изображения берём путь из нужного data-атрибута. Таким образом будет грузиться только нужное изображение. Можно делать упреждающую загрузку (скажем, на 3 изображения в обе стороны).

Не пойму проблемы. Вроде всё несложно.

у меня есть устройство с pixel-ratio = 2

Это откуда следует? Величина devicePixelRatio давно уже переменная и зависит не только от соотношения физических пикселей и разрешения устройства, но и от соотношения страницы к viewport, и даже от банального увеличения.
Более 2-х лет назад прошла эта новость habrahabr.ru/post/159419

И не путайте пиксели CSS и физические пиксели устройства. Последние в правилах CSS вы вообще не затрагиваете (разве что краем в Media Queries).

Достаточно просто реализуется такая схема.
Для кроссбраузерности display:table и отрицательный margin.

Если нужна поддержка IE8, потребуется скриптом выставлять класс (например, для label), поскольку он не понимает псевдокласс :checked. Всё остальное он сформирует нормально без лишних телодвижений.
Делается это вот так.

Вроде, очевидно

.left_menu_content_book_title {
	padding: 0 0 0 64px;
}

Update: Было проще поправить код. Получилось вот так.

Media Queries
Пример

1. Всё зависит от макетов, реализованных для разных размеров viewport, и комментариев дизайнера. В каких-то блоках отступы могут зависеть от размера шрифта, в каких-то от ширины блока, а где-то оставаться стационарными.

2. Используя в качестве единицы величины кегля rem, вы игнорируете возможность наследования от родителя. При этом каскад рассчитывается ровно столько же, и вы не получаете увеличение скорости построения CSSOM. Вот вам простой пример — в блоке есть 2 элемента, величина кегля для первого должна быть в 2 раза больше второго, для которого размер кегля должен быть в 1.5 раза больше, чем у родителя.

HTML

<div class="sample">
	<div class="sample-one">Text</div>
	<div class="sample-two">Text</div>
</div>

CSS

.sample-one {
	font-size: 3em;
}
.sample-two {
	font-size: 1.5em;
}

Изменяя размер кегля родительского блока, я всегда получаю нужный результат. А, в случае привязки к rem, я буду вынужден менять размер в 3-х элементах. А если таких вложений будет 10?

3. Все media queries работают по принципу if. Каждый будет проверен на соответствие и, в случае положительного результата, применяются описанные в блоке правила с учётом специфичности и порядка.

Описание есть в спецификации.
Можно посмотреть и здесь.
<meta name="viewport" content="user-scalable=0">

Возможно. Примерно вот так (пока корректировал положение нижней планки, кто-то поэкспериментировал и сделал вторую версию:).
Близкая тема Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?

Для выстраивания блоков (в том числе и по нескольким строкам) и выравнивания по ширине (а также и по высоте) контейнера уже принято использовать flex, а не плагины с плавающими (о, ужос) элементами.

Что же касается вопроса по скрипту.

всем левым блокам из данного решения не присваивается свойство left-margin

Присваивается. Только значение '0' — там же проверка стоит на соответствие количеству в строке.

if (index > 0 && index % items_count != 0)
	$(this).css('margin-left', margin+'px');
else
	$(this).css('margin-left', '0px');

В идеале определять на сервере user-agent, но для ряда случаев можно обратиться и к CSS media queries.
Вот в дополнение статья Адаптивный и мобильный дизайн с CSS3 Media Queries.

Варианты codepen.io/cleric/pen/ECsGK

Постойте:) Обычно задача ровно обратная — по orientation понять ориентацию (landscape или portrait) и подсунуть свои правила. А по ширине все статьи изобилуют. Ну и спецификация, понятно.