Рубрика: Курсы

Медиазапрос — это подключение определенных стилей при определенной ширине экрана пользователя.

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

Первое, что необходимо сделать, для подключения адаптивности сайта — прописать мета тег с параметрами вьюпорта.

Ранее эту строку мы добавляли в наш html файл.

Если эта строка не будет прописана, то сайт не будет подключать адаптивные варианты вёрстки.

А дальше подключаем медиазапрос.

В файле CSS пишем

@media ()

Важно! Медиазапрос должен идти после стилей, которые вы хотите менять по правилам потока вёрстки.

Так же вы можете создать отдельный файл css для добавления медиазапросов. Не забудьте подключить его к файлу html.

Мы можем сделать медиазапрос для мобильной версии сайта шириной 360px.

@media (max-width: 360px)

Далее, для проверки подключения нового стиля по медиа запросу изменим цвет заголовка на странице на красный. При этом будем обращаться не к тегу заголовка h1, а к созданному классу для этого заголовка.

На скриншоте видно, что сначала идет общие стили для заголовка, а следом идет переназначение нового стиля для ширины экрана 360px.

Теперь в отладчике мы можем увидеть, что заголовок меняет цвет, как только браузер сжимается до 360 px и меньше.

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

В примере мы меняем только значение цвета, поэтому в медиазапрос пишем только его.

В отладчике кода вам так же будет видно, что подключился медиазапрос, а изначальный стиль цвета будет зачеркнут

Чтобы ориентироваться в разных вариантах ширины девайсов скачайте себе памятку: Адаптивы

Смена изображения при уменьшении ширины сайта

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

Избежать это можно при помощи тега picture, в котором есть встроенные медиазапросы.

Для примера возьмем изображение, которое мы добавили в html файл

Нам необходимо обернуть это изображение в тег picture

Дале необходимо прописать тег source и srcset с новой картинкой. Для примера, я использую совершенно другое изображение

а дальше прописать media для определения ширины экрана

Внимательно посмотрите на синтаксис.

Теперь при ширине экрана равном 600 или менее пикселей картинка будет меняться автоматически.

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

Псевдоклассы :hover и :active при адаптиве

Для десктопной версии сайта изменение свойств при наведении работает хорошо, но очевидно, что для мобильной версии это не нужно. А вот :active хорошо подойдет для мобильной и планшетной версии, так пользователь будет понимать с какими элементами он взаимодействует пальцем. Но нужно ли прописывать это отдельно в коде? Нет, так как :hover на мобильной версии работает как :active дополнительно при этом ничего не нужно прописывать

Пример. При наведении в десктоп версии див становится черным.

А в мобильной версии черный цвет будет только при нажатии ЛКМ. При этом код остается неизменным.

 

Что такое адаптивная верстка?

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

На макете вы можете увидеть, как дизайн сайта меняется в зависимости от ширины экрана. Элементы могут группироваться, менять размер или позицию.

Виды верстки сайтов

1. Сайты с фиксированной шириной
   Контейнер сайта имеет строго заданную ширину. Даже если вы сжимаете или расширяете окно браузера, сайт не адаптируется к новым размерам.
   На мобильных устройствах фиксированный сайт выглядит как уменьшенная копия десктопной версии.
   Это устаревший подход, который редко используется.
2. Резиновая верстка
   Элементы сайта адаптируются к ширине окна браузера, используя относительные единицы измерения, такие как проценты (%).
   Пример: ширина блока width: 50%; сделает его равным половине ширины окна браузера.
   Недостаток: на очень узких экранах контент может "сплющиваться" или терять читаемость.
3. Адаптивная верстка
   Контент и его расположение изменяются в зависимости от размера экрана. Чаще всего это достигается с помощью медиа-запросов.
   Пример медиа-запроса:
   
   CSS

   Код скопирован в буфер обмена

   @media (max-width: 768px) {
.header {
flex-direction: column;
}
}
4. Смешанная верстка (резиновая + адаптивная)
   Самый популярный подход. Он сочетает преимущества резиновой и адаптивной верстки, позволяя сайту оставаться удобным на любых устройствах.

Проверка верстки с помощью Pixel Perfect

Чтобы проверить, насколько точно ваша вёрстка совпадает с макетом, можно использовать расширение Pixel Perfect. Оно позволяет наложить макет из графического редактора (например, Figma) на ваш сайт и выявить расхождения.

Установка Pixel Perfect

1. Установите расширение для браузера Google Chrome (или другого браузера):
   - Перейдите по ссылке: Установить Pixel Perfect
   - Нажмите кнопку "Установить"
   
   Далее «Установить расширение»
   
   В правом верхнем углу у вас появится уведомление об установке расширения для браузера.
   
2. После установки настройте расширение:
   - В правом верхнем углу нажимаем три точки, далее раздел «Расширения», далее «Управление расширениями»
   
   - В открывшимся окне находим расширение Pixel Perfect и нажимаем «Сведения»
   
   - Включаем настройку «Разрешить открывать локальные файлы по ссылкам»
   
   - Закрываем окно настроек.

Подготовка макета для Pixel Perfect

Для того чтобы сравнивать дизайн из фигмы с тем, что у нас получается в браузере необходимо скачать всю страницу макета.

В макете фигма, находим нужный нам блок с дизайном и нажимаем на название в левом верхнем углу. Там чаще всего пишется ширина экрана для которого предназначен данный макет. В примере это «chapters_1920» — макет предназначен для ширины браузера 1920 пикселей.

После того, как весь блок выделен на правой панели идем в раздел «Export» и сохраняем изображение всей страницы в формате .png, так же, как ранее мы сохраняли другие изображения из макета.

Далее нам нужно открыть в браузере уже свёрстанный проект — на первый взгляд всё хорошо и ошибок быть не должно.

Загружаете скаченное изображение макета в расширение Pixel Perfect. В правом верхнем углу нажмите на значок пазла и выберите расширение Pixel Perfect.

Откроется интерфейс расширения

Нажмите на кнопку «Добавьте ваш первый слой!» и загрузите скаченное ранее изображение дизайна из фигмы.

В зависимости от того как сильно растянут браузер и на каком экране просматривается сайт, может быть разное смещение, по сравнению с примером

Добавим немного настроек. Так как мы всегда размещаем аш сайт по центру, то и для положения картинки из фигмы нам нужно задать эту настройку.

В интерфейсе Pixel Perfect используйте кнопку для центрования изображения: выделяется голубым цветом

И видим, что по ширине наш контент совпадает с макетом, а вот высота нет

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

Чтобы макет не смещался по области сайта, нужно нажать замочек и тогда он будет статичным

Сверху установите значение расширения, которое нам требуется: 1920

Очевидно, что есть над чем поработать и где-то есть неточности в вёрстке по высоте блоков.

Использование Pixel Perfect в работе зависит от нескольких факторов, включая требования заказчика, тип проекта и практики, принятые в команде.

Когда требуется Pixel Perfect?

1. Требование заказчика
   Некоторые клиенты (особенно дизайнеры или крупные бренды) могут требовать, чтобы сайт максимально точно соответствовал их макету. В таких случаях Pixel Perfect становится обязательным инструментом для проверки.
2. Работа с премиум-дизайном
   Если проект ориентирован на визуальное совершенство (например, сайты модных брендов, портфолио, презентационные страницы), точность макета имеет большое значение.
3. Плотное взаимодействие с дизайнером
   В командах, где верстальщик и дизайнер работают в связке, Pixel Perfect помогает поддерживать единый стандарт качества и минимизировать расхождения.
4. Проекты с чёткими гайдлайнами
   Если у проекта есть строгие гайдлайны (например, для корпоративных сайтов), точное соблюдение размеров, отступов и цветов становится важным.
   *Гайдлайн (от англ. guideline — "руководство" или "инструкция") — это документ, в котором собраны правила, рекомендации и стандарты для работы над проектом.

Когда Pixel Perfect не обязателен?

1. Адаптивная верстка
   В адаптивных сайтах важнее удобство и корректное отображение на всех устройствах, чем идеальное соответствие макету. Небольшие расхождения (например, в 1-2 пикселя) считаются допустимыми.
2. Прототипы и MVP
   На этапе разработки прототипа или минимально жизнеспособного продукта (MVP) ключевую роль играют функциональность и сроки, а не идеальная точность дизайна.
3. Бюджетные проекты
   На небольших проектах, где бюджет ограничен, клиент может не уделять внимания пиксельной точности, если сайт выглядит аккуратно.
4. Креативная свобода
   В некоторых случаях заказчики доверяют разработчику и позволяют отойти от макета, если это улучшает пользовательский опыт.

Pixel Perfect — это инструмент, который полезен в определённых сценариях, но его необходимость определяется требованиями проекта и клиента. Всегда уточняйте у заказчика, насколько важна точность макета, чтобы правильно спланировать работу.

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

Пример: использование переменной для цвета

Представим ситуацию: на вашем сайте используется одинаковый цвет для нескольких элементов (например, кнопок, заголовков или текста). Если вы захотите изменить этот цвет, редактировать каждый класс вручную будет долго и неудобно. Переменные CSS решают эту проблему.

Псевдокласс :root

Чтобы переменные были доступны глобально (для всего сайта), их обычно определяют внутри псевдокласса :root . Это специальный селектор, который обозначает корневой элемент документа (обычно это <html> ).

Пример создания переменной:

Теперь создадим класс для параграфа:

Раньше мы бы использовали просто написание цвета:

Но теперь стилизуем его в CSS, используя переменную:

Если вы решите изменить цвет текста, достаточно обновить значение переменной в :root .

Все элементы, которые используют эту переменную, автоматически обновят свой стиль.

Преимущества использования переменных

Представьте, что на вашем сайте 5 разных элементов с одинаковым цветом текста, и вам нужно изменить его. Без переменных вы бы редактировали код в каждом классе отдельно:

С использованием переменных всё намного проще:

Если потребуется изменить цвет, достаточно обновить значение переменной в одном месте:

Общий синтаксис переменных

Для использования переменной в CSS применяется функция var() .

--имя переменной - например --main-color;

значение по умолчанию - это значение не обязательно прописывать, но оно определяет свойство, если не задано имя переменной.

Использование CSS-переменных экономит время, делает код более читабельным и упрощает поддержку. Особенно это полезно в больших проектах, где требуется много повторяющихся стилей.

 

Видео обзор темы  можно посмотреть по ссылке: Запись урока

 

Самостоятельная работа

Проанализируйте ваш проект Furniro, найдите повторяющиеся стили и задайте им переменные.

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

Timeweb — это популярный хостинг в России, который предлагает удобный интерфейс, поддержку PHP и MySQL (о них мы узнаем в следующих курсах), а также множество других полезных инструментов для работы с сайтами.

Timeweb нам нужен, чтобы в дальнейшем размещать свои проекты на удалённом сервере и тестировать вёрстку на разных устройствах.

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

Регистрация на Timeweb

• Откройте официальный сайт Timeweb
• В правом верхнем углу нажмите кнопку "Вход для клиентом" .

Вас перекинет на новую страницу.

• Нажмите кнопку "Регистрация" .

• Заполняем данные для регистрации:
  - ФИО на русском;
  - действующий e-mail адрес;
  - телефон вводить не обязательно, но лучше ввести, чтобы была возможность восстановить аккаунт при необходимости;
  - по желанию можете создать себе имя пользователя: это будет ваш login для входа;
  - пропишите код партнёра: 121641;
  - галочки ниже под кнопкой "Зарегистрироваться" должны быть нажаты;

• После заполнения данных, нажмите кнопку "Зарегистрироваться"
• Далее вас перекинет на страницу с проверкой платежеспособности

• Нажмите кнопку "Перейти к оплате"
• Введите данные действующей русской банковской карты или воспользуйтесь функцией SberPay

• После авторизации карты вас перекинет на страницу Личного кабинета Хостинга

• На этом этапе мы не будем оплачивать никакие подписки, поэтому просто перейдем в раздел "Дашборд" на панели слева

 

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

• Сейчас у вас есть тестовый период 10 дней и мы воспользуемся этой возможностью. Разместим ваш первый сайт в интернете.
• Обратите внимание, что в разделе "Дашборд" в статистике "Сайты" у вас стоит цифра 1 из 15. Но ведь мы только зарегистрировались и еще не создавали сайт.