Привет! Дизайнер придумал макет, на котором на десктопе ряд объектов и шрифтов маленькие, а на мобильном - крупные. Мне не хотелось бы писать кучу медиазапросов, но функции типа clamp() или % сюда не подходят: они работают прямопропорционально! Может, кто-то знает, что в таких ситуациях использовать?
Не до конца понятен вопрос. Почему важно чтобы пропорционально? Почему не хватает медиа запросов? Но все равно попробую помочь.
Если вдруг структура CSS такая что писать медиа запросы не с руки, можно с помощью js-а навесить на html или body узел классы для мобильников и десктопов, и уже привязывать модификации к этим классам. Брутально, тривиально, рабоче.
1 лайк
Хотел сделать без медиа-запросов - т.е. уменьшался блок - уменьшалось содержимое, обычно так происходит же. В итоге было мало кода, всё смотрелось хорошо на всех разрешениях, было ограничение по минимуму и максимуму размеров элементов через calc или clamp. Однако дизайнер захотел значительно увеличить размеры ряда элементов и шрифты для более мелких разрешений. В итоге появились медиа-запросы. И вот я хотел узнать, можно ли как-то только средствами CSS сделать так, чтобы пропорционально уменьшению контейнера элемент пропорционально увеличивался.
Историю понял. Спасибо что прояснил. У меня нет лучше идей чем уже высказанная и чем игра-организация медиа запросов. Мысль ниже очень маловероятно полезная, тем не менее
В работе SVG именно такая же логика. Маловероятно что подойдет идея, но вдруг. Если сделать все содержимое SVG картинкой то она будет уменьшаться пропорционально. Но с очень большим набором ограничений (типа текст не будет переноситься на новые строки). Эта идея маловероятно что сработает, делюсь просто так вдруг кого на что натолкнет.
–
Я думаю что ожидания любого фронтендщика в том что ты будешь решать подобную задачу через медиа запросы. Возможно стоит отпустить ситуацию, и все же решить ее медиазапросами.
1 лайк
Похоже, действительно, иногда надо не думать, а сделать, как нарисовал дизайнер. Спасибо за идеи )
1 лайк