Авто-отзывчивый веб-сайт с решением zoom jQuery - PullRequest
0 голосов
/ 11 февраля 2020

Я не разработчик FE. Я нашел это простое и элегантное решение для адаптивного веб-сайта. Кажется, он использует функцию преобразования css и масштабирует соотношение всех элементов страницы. Мои вопросы:

1 #: как это сделать при изменении размера страницы с помощью jquery функций?

var $wrapper = $("#scaleable-wrapper");
var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

  $wrapper.resizable({
  resize: doResize
});




function doResize(event, ui) {

  var scale, origin;

  scale = Math.min(
    ui.size.width / elWidth,    
    ui.size.height / elHeight
  );

  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });

}

var starterData = { 
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}
doResize(null, starterData);

2 #: можно ли применить это решение для всего моего веб-сайта, даже это основано на многих элементах flex box?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...