Вопросы React Frontend Developer

Тег <picture> позволяет задавать несколько источников изображений для разных условий, таких как ширина экрана или формат изображения, чтобы браузер выбрал наиболее подходящее. Тег <img> используется для простого вставления одного изображения. Разница в том, что <picture> дает больше гибкости для адаптивных изображений.

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

Адаптивный веб-дизайн (AWD) использует несколько фиксированных макетов для различных размеров экранов, обеспечивая оптимальное отображение на каждой категории устройств. Стратегия, ориентированная на мобильные устройства (Mobile-First), начинается с проектирования для мобильных устройств, а затем добавляет функции и элементы для больших экранов. Это означает, что основной фокус находится на мобильных пользователях, в то время как адаптивный дизайн пытается охватить все возможные устройства.

Адаптивная типографика включает использование единиц измерения, таких как em, rem, %, и современных функций, таких как clamp(). Эти методы помогают сделать текст гибким, подстраивающимся под размеры экрана.

CSS Grid позволяет создавать гибкие макеты с помощью свойств, таких как grid-template-columns, grid-template-rows и grid-template-areas. Эти свойства помогают управлять размещением элементов и адаптировать макет для разных экранов с использованием медиазапросов.