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

Есть небольшая верстка всплывающего блока. Включает в себя три блока со сложными стилями (там относительное/абсолютное позиционирование, куча размеров текстов, фигур и т.д.). В общем, появился вопрос - можно ли добавить адаптивности путем масштабирования этих трех блоков? Насколько я знаю функцию scale, то при масштабировании, место, которое занималось первоначально, таким же и остается, хотя все элементы уменьшаются. А значит, основные блоки не будут помещаться на мобильном, хотя содержимое их имеет малые размеры. Есть мысли на этот счет?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Нет, так не выйдет. Причину вы сами озвучили.
Я иногда использую такой трюк: Адаптация до какого-то не самого маленького размера, а дальше скейлинг через вьюпорт.
Допустим делаем максимум планшетную версию до 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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы