Djents, ну уж первыми двумя вариантами-то вы можете самостоятельно?
Для 3 - у вас блоки фикс ширины, значит известно сколько их помещается при какой ширине вьюпорта. Да, будет удобнее, когда наконец появятся media от контейнера.
тоесть нельзя использовать без проблем display : flex
Любой современный сайт отправьте на печать.
Там наверняка что-то уедет, потому что большинство не оптимизированы под печать, но будет очевидно, что и флексы и гриды работают. А margin тем более.
Это значит, что в корне диска на который "чужой" сохранил ваши файлы, нужно найти папку project, в ней папку css, в ней файл style.css
Шанс, что файл там есть, конечно, отличен от нуля, но близок к нему :)
А в гите у вас вообще нет style.css, есть какой-то кусок исходников в виде styles.scss, который всё равно не заработает.
p.s.
Обычно нет смысла отправлять кому-то архив со статикой, совсем не всё работает без сервера, даже если это только html+css.
Лучше научитесь делать Github Pages - это легко и удобно. Раз уж гитом уже пользуетесь.
Но, как обычно, нет единого универсального решения.
Больше того, даже разные блоки в рамках одной страницы могут адаптироваться разными методами.
У примера выше есть проблемы, такие же как и у варианта с rem - настройки шрифта пользователя игнорируются. И обратите внимание на размер шрифта на десктопной ширине и мобильной. Вот что будет, если сайт полностью масштабировать. Но кое что из него вполне можно использовать.
Чаще всего совсем не нужно именно масштабировать сайт, обычно уместнее перестраивать блоки, изменять размеры шрифта, отступов и т.д.
Некоторые дизайнеры на мобилках шрифт увеличивают, а не уменьшают.
Имеет смысл
- изучить разные варианты, посмотреть какие нюансы в каждом из них
- узнать какие есть относительные единицы измерения и как они работают в разных случаях (например, проценты в разных случаях считаются от разных величин)
- почитать о проблемах доступности для слабовидящих, для работающих с клавиатуры и т.д.
- почитать про css функции clamp, min, max
- про кастомные свойтсва, они тоже упрощают работу, в том числе и с адаптивом
gazes12, расскажите, пожалуйста, какое значение будет у display на 50%? flex-none? none-flex? nfolneex?
А на 30%?
Вот и браузер не знает.
Поэтому и не работает.
Вам предлагают быстро поменять display, а дальше менять все остальное, что нужно для анимации.
Я бы попробовала обойтись без смены display.
Отступы можно тоже убирать. Правда, будет сдвигаться нижний блок (но по демке не понятно, какой эффект должен быть на самом деле).
Можно задать отступы второму элементу.
Можно убирать у одного и задавать другому с одинаковой скоростью (я бы не стала, риск дерганья)
Для 3 - у вас блоки фикс ширины, значит известно сколько их помещается при какой ширине вьюпорта. Да, будет удобнее, когда наконец появятся media от контейнера.
На codepen не вижу ни одной из попыток.