Как сделать сайт под любой размер экрана?

Question

[Арсений Соколовский]

Сделал игру на сайте, но есть проблема с ресайзом. Дело в том что все объекты слетают когда размер экрана меняется. Я делал стили как умел, и их там довольно много, так что переписывать все с нуля не вариант. Есть ли способ сжимать и растягивать страницу в зависимости от экрана, чтобы все пропорции и так далее сохранялись. Как здесь

Answer 1

[Smirator]

https://developer.mozilla.org/ru/docs/Glossary/Viewport

Добавь Viewport. Затем проверяй страницу на всех разрешениях. После пропиши медиа. Измени стиль отображения ломающихся элементов на нужном разрешении.

/*Media*/
/* Large desktops and laptops */
media (min-width: 1200px) {
}

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {
}

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {
}

/* Landscape phones and portrait tablets */
media (max-width: 767px) {
}

/* Landscape phones and smaller */
media (max-width: 480px) {
}

Comments

[Арсений Соколовский]

Спасибо большое, слетает буквально все, придется попотеть)

Answer 2

[true]

посмотри пример
- вроде бы всё прекрасно работает
проверь

let адаптировать_размер = function()
{
let ширина_экрана = document.body.clientWidth
if ( ширина_экрана < 1084 )
{
let отношение = ширина_экрана / 1084
главный_контейнер.style.transform = "scale(" + отношение + ")"
}
else
{
главный_контейнер.style.transform = "scale(1)"
}
}
window.onresize = адаптировать_размер
адаптировать_размер()

body { 
overflow: auto; 
flex-direction: column; 
justify-content: flex-start; 
align-items: center; 
} 
#главный_контейнер { 
width: 1024px; 
flex-shrink: 0; 
transform-origin: center top ;
}