Можно ли адаптивность реализовывать через transform?

Question

[Дмитрий Жуков]

Есть небольшая верстка всплывающего блока. Включает в себя три блока со сложными стилями (там относительное/абсолютное позиционирование, куча размеров текстов, фигур и т.д.). В общем, появился вопрос - можно ли добавить адаптивности путем масштабирования этих трех блоков? Насколько я знаю функцию scale, то при масштабировании, место, которое занималось первоначально, таким же и остается, хотя все элементы уменьшаются. А значит, основные блоки не будут помещаться на мобильном, хотя содержимое их имеет малые размеры. Есть мысли на этот счет?

Answer 1

[Сергей delphinpro]

Нет, так не выйдет. Причину вы сами озвучили.
Я иногда использую такой трюк: Адаптация до какого-то не самого маленького размера, а дальше скейлинг через вьюпорт.
Допустим делаем максимум планшетную версию до 600 пикс, а в телефонах показываем ее уменьшенную (масштабированную) версию
Для это просто вставляем в head простой код:

<script>
    (function() {
      var minWidth    = 600;
      var width       = screen.width;
      var oldViewport = document.querySelector('meta[name="viewport"]');
      var viewport    = document.createElement('meta');
      viewport.setAttribute('name', 'viewport');
      viewport.setAttribute('content', 'width='+(width<=minWidth?minWidth:'device-width')+'');
      document.head.replaceChild(viewport, oldViewport);
    })();
</script>

Comments

[Дмитрий Жуков]

Спасибо! Буду пробовать

[Сергей delphinpro]

Дмитрий Жуков, По поводу отдельного блока, который нужно масштабировать.
Буквально на днях верстал схему

гексы позиционируются абсолютами.
Написал sass миксин в параметром — размер гекса, и уже от него рассчитывал остальные цифры.
В результате адаптивность сводится к вызову миксина

@include hex-scheme(160px);

@include media-breakpoint-down(md) {
  @include hex-scheme(120px);
}

@include media-breakpoint-down(xs) {
  @include hex-scheme(80px);
}

[Дмитрий Жуков]

Сергей, покаже сам миксин? Любопытно.

[Сергей delphinpro]

Дмитрий Жуков, https://gist.github.com/delphinpro/9eed32f82ece177...