tokmaganbet
@tokmaganbet

Как верстать под 100vh?

В последнее время часто просят сверстать лендинги, у которых первый экран должен занимать ровно 100% высоты.
Обычно высота такого блока ~1000px, на десктопе всё ок, но как вместить его на экране ноутбука, у которых высота окна <700px?

Сейчас при верстке использую rem, уменьшаю :root на ноутбуках и все уменьшается пропорционально, но этого недостаточно.

Один из таких моих проектов: https://tokmaganbet.ru/sites/azbuka4/
Вроде получилось, но как по мне я сверстал не совсем правильно
  • Вопрос задан
  • 546 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега CSS
\( ゚ヮ゚)/
Правильное использование отступов и min-height: 100vh; поможет.
По поводу Вашего проекта - нету:
- main, зато есть section (имеется ввиду, что надо было использовать main);
- meta-тэги, их почти нет;
- outlin'ы - их вообще нет;
- Языки нельзя переключать с клавиатуры (читайте про tabindex).

Косяки:
- cursor: hand; не существует;
- Атрибут required содержит значение required;
- Ссылки, ведущие на сторонние ресурсы не имеют rel="noopener" или rel="noreferrer";
- Половина (2/3) ссылок для мессенджеров открывается в той же вкладке.

Также Lighthouse ругается - CSS и JS не минифицированы (что-то мне подсказывает, что картинки тоже).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы