Арсений Матыцин

Действительно, какая-то дичь. Ежели ты используешь Chrome Devtools, то там есть вывод размера вьюпорта (при эмуляции устройства и если двигать ползунок панели), зачем его скриптом ловить — для меня секрет.

Дальше в комментариях верно отметили про стандартные разрешения — можно взять за референс популярный Bootstrap и повторять его breakpoints до того, как начнешь понимать, что к чему.

Естественно, это не убережет от косяков, ибо да хотя бы пользовательский ввод. Или самое косячное — навигация в шапке. Постоянно с этим сталкиваюсь, особенно при введении новых элементов (сейчас у меня на сайте, к примеру, ни в п... короче ни к месту форма входа, правда ее там никогда и не было). Я к тому, что дизайн в любом случае при некоторых масштабных введениях приходится переделывать. А чтобы максимально избегать провисов между популярными viewport-ами, достаточно осваивать переносы и обрезку контента. Если позволяет условия, конечно.

Например у флексов есть свойство flex-wrap:wrap, а гриды так вообще супер, можно указать минимальный размер для переноса и он будет работать не как в обычных блоках + зависимость от контента. Но, к сожалению это работает по сути только в списках, при верстке специфического контента работают другие условия.

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

PS: чтобы тестировать, как мужик открывай эмулятор и дергай ползунок, прокручивая страницу. Где-то поехало — переделывай). А потом лови лучи боли от IE, в котором забыл оттестировать или Safari на iOS.

PSS: самое малое устройство за базу можешь взять 320 по ширине, а больше 1920. Если шире, то оптимально обернуть в контейнер отцентрированный.

Пробел между селекторами это комбинатор. Их есть еще несколько.

Убрать фиксированную высоту у родителя элемента вложенного списка.

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

Не знаю, что там должно быть в итоге, но если это какой-нибудь проигрыватель по типу Яндекс.Музыки, то решение топчик)

В глаза долблюсь, с первого раза эту жесть в тегах не заметил. Если кратко, то открытие и закрытие формы происходит в разных уровнях, что в свою очередь обычно ведет к самозакрытию. Т.е. кнопка, которая вызывает событие находится уже вне самой формы при рендеринге. Я не перелопачивал код и не буду, но инфа сотка, так оно и есть.

ЗЫ: Оно вообще работать не должно, сжечь я бы рекомендовал. И верстать научится.
ЗЫЫ: Без обид, держи валидатор.

1. Типографика в вебе = боль.
2. Vertical-align работает относительно строки, т.е. для вложенного элемента.
3. Ты можешь указать line-height:1, тогда и сверху и снизу будет нулевой отступ (на самом деле ничего подобного, так как зависит все от шрифта, но попробовать можно).

Читаем доку, радуемся жизни.

Не от того отталкиваешься. Pug — тупо шаблонизатор. А вот данные получает, скажем ЯП бэка. Тебе нужен любой фреймворк, к которому можно подключить pug, как модуль.

Если хочешь под ноду, то ищи фреймворки под нее, а потом уже под них просматривай подключаемые модули. Может где уже есть встроенный.

1. Это вопрос к JS, так как CSS пока динамически так рассчитывать не умеет. И врядли когда начнет, ибо стили-то каскадные.
2. Никакого отношения к позицонированию данный вопрос не имеет.
3. Проблемы можно решить без JS, если реализовать верстку с помощью position:sticky.

С JS же решается следующим образом:

var header = document.querySelector('.fixed');
var content = document.querySelector('.static');
content.style.marginTop = header.offsetHeight;

В данном же виде это костыль, от которого следует оттолкнуться от при углублении в тему.

JS-framework (помнит состояние и перезагрузки при переходах нет, ну и никто в здравом уме не будет сам такое писать на ванилке) + простые визуальные эффекты с анимацией (переключение кейсов на главной это чуть более сложная табуляция).

ЗЫ: а то, что скрола нет, так и контента нет, чтобы он появился. Тыкай в любой кейс и там уже достаточно для его появления.

Я не вводил свой номер, естественно, для проверки, но:
1. Сгенерить рандом (или не рандом), который отдаст диапазон\четкое попадание в часть оборота, скажем, .5
2. Добавить расчитанный вручную красивый путь, допустим, оборотов 10
3. Использовать в animate\transition(зависит от реализации) css функцию ускорения и торможения (easing function).
4. Запустить по событию