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

Question

[YeaNot]

Возможно ли сделать так, чтобы сайт полностью масштабировался при ширине экрана 1440px и более? Т.е. чтобы при большой ширине сайт всегда выглядет так же, как и при ширине 1440px. На 4к экране особенно некомфортно смотреть, все элементы мелкие.

Comments

[Ankhena]

Вот реализация с уменьшением

Это уменьшение только ширины. Причем max-width: 100%; там довольно сомнительное.

Просто масштабирование делать, конечно, можно, но ведь по-хорошему в большинстве случаев, нет смысла масштабировать толщину бордеров и аналогичных элементов. Хорошо бы подходить с умом.

Можно использовать единицы vw, можно в сочетании с clamp. Также calc. И тому подобные приемы.
Но в использовании vw есть нюансы для пользователей у которых в настройках браузера установлен более крупный шрифт, эта настройка не сработает.

[YeaNot]

Ankhena, да, спасибо, не было смысла писать медиа запрос под мин ширину. Да и переделывать значения элементов под бОльшие экраны. Было бы славно найти способ, как не затрагивая ничего добавить автоматическое масштабирование без костылей

[imko]

Не забывайте что экран может быть произвольной пропорции, а то получится хофф)

Answer 1

[tyxeo]

вот код для уменьшения контейнера при размере менее заданного 1084
для увеличения сам догадаешься как

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

window.onresize = адаптировать_размер

адаптировать_размер()

Answer 2

[Aetae]

Все ребята с большими экранами давно научились нажимать Ctrl++. Если ты хочешь тупо такое же масштабирование, то не надо*.

Смысл что-то делать есть только если настоящий дизайнер разумно что-то придумает специально под такой масштаб.

* Если очень хочется, то немного математики + transform: scale + изменение ширины скроллбаров, но результат будет - херня.:)