Как правильно делать полностью резиновую верстку на calc или rem/em?
Добрый день, как правильно делать резиновую верстку, то есть контент на 1200px(ширины экрана) выглядит также как и на 6000px(цифра из воздуха), к примеру как https://hd.kinopoisk.ru/.
Как я понял необходимо использовать calc либо rem/em или делать вычисления в JS, но пожалуйста можно чистые примеры, как это используется/использовать, будь то функция или миксин.
Но, как обычно, нет единого универсального решения.
Больше того, даже разные блоки в рамках одной страницы могут адаптироваться разными методами.
У примера выше есть проблемы, такие же как и у варианта с rem - настройки шрифта пользователя игнорируются. И обратите внимание на размер шрифта на десктопной ширине и мобильной. Вот что будет, если сайт полностью масштабировать. Но кое что из него вполне можно использовать.
Чаще всего совсем не нужно именно масштабировать сайт, обычно уместнее перестраивать блоки, изменять размеры шрифта, отступов и т.д.
Некоторые дизайнеры на мобилках шрифт увеличивают, а не уменьшают.
Имеет смысл
- изучить разные варианты, посмотреть какие нюансы в каждом из них
- узнать какие есть относительные единицы измерения и как они работают в разных случаях (например, проценты в разных случаях считаются от разных величин)
- почитать о проблемах доступности для слабовидящих, для работающих с клавиатуры и т.д.
- почитать про css функции clamp, min, max
- про кастомные свойтсва, они тоже упрощают работу, в том числе и с адаптивом
Простой
