Как адаптировать сайт под разрешение экрана пользователя?

Question

Я проектирую свой сайт, используя разрешение экрана 1024x768. Когда вы просматриваете веб-сайт в браузере с компьютера с меньшим или большим разрешением экрана, веб-сайт начинает деформироваться.
Как я могу адаптировать сайт к разрешению экрана пользователя независимо от того, какое разрешение экрана у пользователя? Я верю, что это возможно через JavaScript или CSS, но не знаю, как ...

Answer 1

Лучший способ решить эту проблему - вместо использования px использовать em или% (в процентах).

.container {
  width: 1000 px;
  height: 750 px;
}

---

.container {
  width: 90%;
  height: 90%'
}

Answer 2

То, что вы ищете, это браузер "viewport".

Эта ссылка предлагает хороший обзор того, как получить видовой экран: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

В большинстве стандартных браузеров вы можете просто ссылаться на window.innerWidth и window.innerHeight в JavaScript.

Если вы используете инфраструктуру JavaScript dojo, то вы можете просто вызвать dijit.getViewport (), который сделает за вас тяжелую работу.

Если у вас есть размеры окна просмотра, вы сами решаете, как ваша веб-страница будет реагировать на информацию, полученную из браузера.