Для корректного отображения картинок и шрифтов необходимо правильно настроить папки проекта.
Структура проекта
Основной документ – index.php (или index.html), содержащий весь код. Картинки расположены в папках: img (изображения VM, SPS), social (картинки для футера), ar (основное изображение). Шрифты находятся в папке fonts (например, font.ttf). CSS-файлы располагаются в папке css. Правильное расположение файлов обеспечит корректную работу сайта. Пути к ресурсам следует задать в index.php/index.html или непосредственно в CSS-коде.
Адаптивный дизайн: три ключевых аспекта
Для создания адаптивного сайта необходимо учитывать три основных момента:
Размеры блоков в процентах
Все блоки должны быть размерены в процентах, а не в пикселях. Тег <body> обычно занимает 100% ширины экрана. Использование процентов позволяет элементам автоматически подстраиваться под разные размеры экранов.
Например, для создания отступов лучше использовать проценты, а не пиксели. Отступ в пикселях (например, margin-left: 50px;) увеличивает ширину блока сверх ширины экрана, что приводит к некрасивому отображению. Вместо этого можно использовать calc(), например width: calc(100% — 50px);, чтобы отнять отступ от общей ширины, или задать отступ в процентах (например, margin-left: 5%;), а ширину блока – width: 95%;. В этом случае блок всегда будет занимать 100% ширины экрана.
Таким образом, все размеры в адаптивном дизайне должны указываться в процентах для обеспечения адаптивности. Например, шапка сайта может занимать 98% ширины, с отступами по 1% слева и справа (padding: 0 1%;).
Инструменты разработчика в браузере (например, в Google Chrome) позволяют тестировать адаптивность сайта, изменяя размер окна браузера и наблюдая за поведением элементов.
Адаптивные шрифты
Шрифты должны подстраиваться под размер экрана. Для этого размер шрифта следует указывать в относительных единицах, таких как em или rem. 1em — это базовый размер шрифта, 1.7em — примерно в два раза больше. Использование пикселей для размера шрифта не рекомендуется для адаптивного дизайна, так как они являются фиксированными значениями.
CSS3 Media Queries
Для адаптации блоков под разные размеры экранов используются Media Queries — CSS3 свойства, позволяющие применять разные стили в зависимости от размера экрана. Это позволяет создавать разные макеты для больших и маленьких экранов (например, на большом экране два блока могут располагаться в одну строку, а на маленьком — каждый на своей строке). Разбор Media Queries и создание адаптивных макетов будет осуществлен в следующем уроке.
В этом уроке мы рассмотрели основные принципы создания адаптивного сайта: использование процентов для размеров блоков и относительных единиц (например, em, rem) для шрифтов. В следующем уроке мы подробно рассмотрим Media Queries. Помните о правильном размещении файлов и путей к ним в вашем проекте.