Anubis

У винды и оси разный подход к сглаживанию шрифтов. Так что может не "на маке толще чем есть", а "на винде тоньше чем есть" ;)

Единственное, что может быть вредоносным в подключаемом через link стилевом файле - его гигантский размер

Лично мне удобно пользоваться css-модулями, в качестве препроцессора - scss. При должной настройке можно забыть о повторяющихся в проекте именах классов, с server-side rendering подход тоже вполне дружит.

1) https://www.npmjs.com/package/mobile-detect

2)

import MobileDetect from 'mobile-detect';

const md = new MobileDetect(window.navigator.userAgent);

const isMobile = md.mobile() != null;

3) Имея под рукой значение isMobile, управляете дальнейшей логикой. Например, как в варианте от antoo

Лучше такие задачи не привязывать к среде выполнения. Без gulp можно обойтись - есть webpack и rollup.

В less и sass так:

.some-class {
  // До 576
  color: cyan;
  font-size: 20px;
  // От 576
  @media (min-width: 576px) {
    color: red;
    font-size: 14px;
  }
}

transform3d, коэффициенты определять через js - на основе позиции курсора на компоенте относительно его ширины и высоты

Мне помогло добавление resolve-url-loader перед postcss-loader/less-loader

div с css-свойствами:

background-size: cover;
background-position: center;
background-image: url("...путь к фоновому изображению");

...и вписывайте в него нужное содержимое.
При желании можно как в примере указать ему фиксированную высоту.