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

Question

[Anonymous]

Всем привет! Недавно столкнулся с такой проблемой, что на моём экране (1920px на 1080px) выглядит всё так как нужно, а на экране уже с меньшим разрешением (1366px на 768px) выглядит не так. Как сделать так, чтобы на всех экранах с любым разрешением выглядело так как 1920px на 1080px с помощью html или js?

Comments

[dmitry-toster]

так как вы никто не делает уже лет 12. сайты должны быть адаптивными, а не такими, какими вы их описываете

[Ankhena]

Сначала определитесь, пожалуйста, с одинаковостью.
Например, есть ваш 1920х1080 и 2560х1080.
Высота одинаковая, ширина разная.
И как оно должно выглядеть? Буквы должны растянуться в ширину на 1.33? Или всё таки поля? Или увеличиваем, но по высоте перестает помещаться в один экран?

А если наоборот, мобилки? Вы собираетесь то, что хорошо видите на 1920 просто умять в 320? Ну-ну.

Есть единицы измерения, которые зависят от размера вьюпорта: vw, vh, vmin, vmax.
Есть %.
Есть единицы, зависящие от размера шрифта, em и rem.

Еще вам пригодятся meta viewport, @media условия, флексы, гриды и другие способы сделать адаптивный сайт.

[Антон Литвиненко]

Если выпилить метатег viewport то вы получите примерно то что хотите. Сайт просто станет неадаптивным.
Вот пример такого сайта
https://mozayka.kiev.ua/
на мобилках пользователям приходится зумить пальцами те части сайта, которые им нужны.
Так сайты делали очень давно

Answer 1

[Надим]

Если верстать сайт используя единицы rem везде, то как раз можно сделать, как вы хотите - сохранение пропорций на любых экранах.

Comments

[Rustam Bainazarov]

Только не rem, а vw.

[Надим]

Рустам Байназаров, а вот шрифт для тега HTML уже задавать в vw и все rem значения на странице завяжутся к нему.

[Rustam Bainazarov]

Надим Закиров, вот тогда да. А вот удобнее ли это, чем делать всё на vw без доп. прослойки относительных единиц, — без понятия.

[Ankhena]

А потом будут сюрпризы.
Например: на 1920 текст получался 16px (заданный через vw), каким он там будет на 320? Почти 3 пикселя? Пользователи мобилок будут счастливы закрыть ваш сайт.
Следующим сюрпризом может оказаться настройка браузеров "минимальный размер шрифта", обычно это 8px. Куда всё поедет, когда вместо 2.66 будет отображаться 8?

Толщину границ тоже в rem'ах задавать будете?

Т.е. такой совет без дополнительных рассказов про адаптивный шрифт, calc и media может стать подножкой, а не помощью.

[Надим]

Ankhena, так я и не говорю, что надо это все применять в лоб. Понятно, что на экранах менее 980px уже надо будет другие правила использовать при помощи медиазапросов.

[Ankhena]

Надим Закиров, велик риск того, что пользователи, задающие вопросы таким образом, как раз таки примутся исполнять это в лоб. Поэтому, я написала комментарий, что так не выйдет, чтобы не было заблуждений.