Как используются rem em при верстке с дизайн-макета?

godsplane,

скорее всего это не совпадет с макетом

Это не понятно.
Я уже сказала, совпадение с макетом не зависит от того, в каких единицах измерения вы задаете значения.
А скорее от того, что у верстальщика было в школе по геометрии. Ну и капельку от знания как именно работают свойства и их значения по спецификации, а не по предположениям.

Есть в макете блок 1240 шириной и у него 3 дочерних по 400px и между ними по 20px.
Без разницы, напишете вы им calc((100% - 40px)/3) для флексов или инлайн блоков.
Или 1fr и gap для гридов.
Или 25rem при 1rem = 16px (не знаю уж зачем).

в том что какой смысла мне писать все в em / rem

Мой пример выше отражает дибилизм идеи задавать ширину блоков в rem. При наличии % и fr.
Но вы можете писать исходят из ТЗ, разума и того, как вам удобнее.

Какие используете единицы измерения при верстке?

Как уменьшить высоту grid-template-rows?

godsplane, потому что 2 и 3 уменьшились на величину gap.

Вам достаточно сделать грид в 2 строки: min-content 1fr и первому итему задать span 2

Как используются rem em при верстке с дизайн-макета?

godsplane,

как это применяется при версте pixel perfect с макета

Также как любые другие единицы.
Какая разница, браузер всё равно всё в px пересчитывает. В макете написано 16px и в браузере должно получится ~16px.
Уточните, что именно вас смущает.

Как зафикисровать высоту flex блока без JS?

MasterCopipaster,

ибо блок будет растянут больше чем нужно

Сколько нужно?

1. Какая высота должна быть у main?
2. у container?
3. у row?
4. у box? (это ш рехнуться можно сколько оберток)

Как зафикисровать высоту flex блока без JS?

MasterCopipaster, давайте по этапам: вам нужно чтобы блок занимал всю высоту окна?
- да - ставите 100vh (height или max-height)
- нет - ставите сколько вам нужно

Как зафикисровать высоту flex блока без JS?

ambisinister One, я плохо понимаю ваши комментарии.
В том числе какое отношение ява имеет к верстке.
И я не предлагала ничего городить.
Переформулируйте свой вопрос, пожалуйста.

Как зафикисровать высоту flex блока без JS?

MasterCopipaster, и что это меняет? Точно также через flex-grow.

Мне вообще больше нравится вариант с гридами.
https://jsfiddle.net/6k70cj8o/ (Это для другого вопроса и высота в px, но сути это не меняет. Мне лениво каждый раз менять там высоту для этих почти ежедневных вопросов.)

Как зафикисровать высоту flex блока без JS?

считать от размера просматриваемой области VM не правильно.

Почему не правильно, если вам нужно, чтобы весь блок занимал весь вьюпорт?

Как адаптировать?

С чего бы начать-то?

Сначала нужно закрыть незакрытый тег ссылки CONTACT US. Кстати, текст в коде правильнее писать по правилам языка страницы, а не капсом. Для этого есть text-transform.

Теперь про центр..
Для .menu-nav вы задали

width: 100vh;
    height: 100vh;

И что получается: если высота окна больше ширины, то блок не помещается и выпадает за пределы окна направо.
А если наоборот, высота меньше ширины, то блок не занимает всю ширину окна и прижат влево.

Если вам не понятно что происходит в браузере и инструментов разработчика не хватает, то обводите блоки рамочками (border, outline, lutline-offset, box-shadow).

Возможно, вы хотели задать ширину в vw, а не vh. А лучше 100%, чтобы не вывалилось.

А потом творится что-то еще любопытное: margin-right: 100px; для li в меню. О каком центре может идти речь при таком margin?

Как используются rem em при верстке с дизайн-макета?

Вам нужно сделать простую вещь: заглянуть в справочник и выяснить что это за единицы такие.
Следующим ходом подумать о том, что не у всех пользователей хорошее зрение и они ставят увеличенный шрифт в браузере (не масштаб страницы, а именно шрифт это важно).
Сотворите простенькую страничку из стандартных блоков.
По-разному задавайте размеры и блоков и шрифта.
Проверяйте каждый из вариантов в браузере с разными настройками (100%, изменение масштаба, изменение размера шрифта)

em полезны в таких ситуациях: есть блок с размером шрифта 16, в нем заголовок 20. Если заголовок по логике должен оставаться 20 даже если шрифт будет 18, то em не подходят. А если при изменении основного шрифта заголовок тоже должен пропорционально изменится, то можно задать заголовку шрифт в em.

rem полезен тем, что зависит от настройки шрифта в браузере.
И если всё (под словом всё я имею в виду в разумных пределах, задавать бордер в em или rem не стоит) задано в rem (или em), то это хорошо для доступности - пользователь всё разглядит.

Но если перед этим вы задали для html размер шрифта в px, а потом стали все писать в rem, то доступность полетит к черту. И с таким же успехом можно было просто задавать в px беря их из макета и не запариваясь на странные махинации с переводом.

Как сделать читалку на всю ширину экрана в мобильной версии?

У вас там разнообразных отступов у родителей полно.
И 35 ошибок валидатора.
Сначала нужно разобраться с ними.
Вкладывать iframe в заголовок h2 это близко к безумию.
Потом задать отрицательный отступ для iframe и ширину.

Как уменьшить высоту grid-template-rows?

Сейчас там нет ничего кроме паддинга.
В прошлой версии вы сами задали строкам равную высоту.

Как решить ошибку при установки Nunjucks.js в Gulp4?

Sodasss, написано же, что вы уже один раз определили watch, второй раз этого не сделать.

Думаю, что отслеживание njk нужно добавить к отслеживанию всего остального, а не делать это по отдельности.

Подсказка: см сюда "startwatch".

Можно ли изменять локально подключенный italic шрифт через @font-face?

Скачивается с сайта микрософт https://developer.microsoft.com/en-us/fluentui#/re...
Или тут прямо в woff2 https://bestfonts.pro/font/segoe-ui
Тут нет курсива, но браузер сделает его псевдокурсивом.
Для пользователей винды вы можете использовать local.

Вообще, предоставление вам шрифтов это задача дизайнера.

Как решить ошибку при установки Nunjucks.js в Gulp4?

Попробуйте прочитать ошибку со скрина. Найти строку с ошибкой, её номер тоже есть на скрине.
Исправьте её.

Как прописать html код на кроссбраузерность?

Тег link корректно работает со всеми браузерами. Если его правильно написать, т.е. добавить rel и закрыть.

Остальное зависит от того, что ещё есть в коде и что в файле стилей (этом и других).

Ваш вопрос необходимо конкретизировать. Указать, что конкретно не работает, что вы пишете и т.д.
Иначе вопрос просто удалять, потому что на него вообще не ясно как ответить.

Как научится верстать красивую адаптивную вёрстку?

Сейчас полно онлайн курсов по веб-дизайну от вполне толковых ребят.
Открываете инстаграм, несколько месяцев следите за каналами потенциальных лекторов, нравятся ли посты, работы и т.д. Часто есть бесплатные вебинары, в которых тоже говорят и показывают разумные штуки.

Если не хотите курсы, то план в целом аналогичный: открываете dribble, behance, да ту же инсту и смотрите красивые картинки, повышаете насмотренность.

Кривая верстка - ну тут даже не знаю. Вёрстка это обычная геометрия, записанная через теги и свойства. Скорее дело в недостатке практики или не знании каких-то свойств.

Придумывать свое или верстать по макету?

Kanm, что вы несете?

Вообще без разницы что верстать, лишь бы практиковаться.

Логично, что лучше будут получаться те макеты, которые больше нравятся и доставляют удовольствие.

Придумывать свое или верстать по макету?

Kanm, слушайте, там же 100500 разных макетов.
Выбирайте какие нравятся

Надо ли разбивать верстку на блоки?

Критично ли это?

Критично в первую очередь станет вам, когда захотите переиспользовать какие-то части этой работы в следующем проекте.

Как только надоест заниматься выковыриванием или написанием одного и того же каждый раз с нуля, тут же всё по блокам и разобьется.
Ещё некоторым помогает заглянуть в таймтрекер и выяснить получившуюся стоимость часа.

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