Дима Паутов

А вы знаете как работают проценты? Проценты - это значит какой-то процент от значения родителя. Вы инспектором посмотрите код! Посмотрите на элемент, которому вы дали 100% высоты, а теперь, посмотрите на родителя этого элемента. Какая у него высота?

Вам нужно растянуть сначала родителя, а уже потом ребёнка)))) Странно звучит))

При чём тут какая-то связка с php? Как php вообще относится к вёрстке? Если вы там адаптивности боитесь, то, лично моё мнение, вам ещё нужно подтянуть знания и вы себя в оценке переоценили))

Что насчёт самого макета, то я бы сказал, слишком лёгкий. Чё тут делать то? Карту вставить? Подвигать стрелочки при наведении через css? Сделать кнопку с раскрытием меню?

P.S. Я никак не хочу обидеть или оскорбить вас, но я не понимаю, сути вашего вопроса. У вас навыки 70% х 30%, а вы вместо того, что бы начать верстать, пришли сюда с глупым вопросом, а не слишком ли сложно!

А в чём проблема?

Идём сюда и конвертируем шрифты. На выходе получим разные начертания и готовый пак с подключением шрифтов. Добавили себе в стили и прописали для нужных селекторов нужные начертания

https://jsfiddle.net/2fweLxmd/5/
https://jsfiddle.net/2fweLxmd/6/

вариантов много

https://jsfiddle.net/Lokmwn5a/

Автопрефиксер работает на основе настройки в webpack или gulp, в которой указывается, какие версии браузеров вы поддерживаете. А can i use ему нужен для того, что бы узнать, нужно ли для указанной версии браузера указывать префикс к свойствам. Либо положите болт, ибо плохого в этом ничего нет, или просто укажите список версий браузеров, для которых не нужны префиксы.

Отвечая на 2й вопрос, то лучше использовать плагины для галпа или webpack. Причина проста, ваша заготовка для сборки будет независимо работать от любого редактора и любой человек сможет без проблем использовать все фичи вашей сборки запуском 1й команды npm install, а редактор вы можете сменить, в котором заново будете устанавливать свои плагины.

Точно так же, как и с html + css. У канваса, условно, 500px ширина, а у слоя с графиком 2000px. Отрисовали слой с графиком, запускаем анимацию смещения по оси X. Пишем условие, если докрутили до конца, останавливаем анимацию.
https://jsfiddle.net/wjhn7qb4/ - например так. Условие остановки я конечно не стал писать, суть не в этом.

https://codepen.io/anon/pen/WMbyvx

Такие перестроения обычно бывают при использовании вот такого вот такой js либы. На css сделать перемещение блоков плавно нельзя. Ведь элементы не позицию меняют, а просто сваливаются друг под друга при адаптации. transition анимирует css свойства, а не поток элементов на странице.