Я работаю над оптимизацией отзывчивости веб-сайта.Обычно мне сходит с рук с помощью медиа-запросов.
Проблема в том, что, когда я разработал и написал scss на основе devicePixelRation = 1, я написал медиазапросы, чтобы определить точку останова для меньшего экрана.
Теперь в редких случаях, когда сайт доступен с устройства с devicePixelRatio> 1, все выглядит больше.
Я бы хотел найти элегантное решение, чем использовать
@media (-webkit-max-device-pixel-ratio: 2) {}
Я думал получить devicePixelRatio и использовать его в качестве делителя для масштабирования любого необходимого мне значения scss.
Получить (каким-то образом) devicePixelRatio в ts и передать его в глобальный файл scss
$pixel-ratio: 1;
$main-title : (1em / $pixel-ratio) --- 1 / 1 = 1
$pixel-ratio:1.5
$main-title : (1em / $pixel-ratio) --- 1 / 1,5 = 0.666
Я также думал о другом подходе, потому что, по-видимому, на самом деле невозможно передать переменную всксс через тс.Тогда идея будет состоять в том, чтобы создать другой файл глобальной переменной scss и загрузить правильный файл, основанный на данном устройстве pixelratio.
Я хотел бы, чтобы кто-то дал мне мнение о моих идеях и, пожалуйста, простите меня за любое зверство, написанное вэтот пост.
Любые предложения приветствуются.