CSS от А до Я: создаем адаптивный дизайн с помощью медиа запросов

CSS от А до Я: создаем адаптивный дизайн с помощью медиа запросов

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

М значит медиа запросы

Рискну предположить, что подавляющее большинство веб-дизайнеров и разработчиков знакомы с концепцией адаптивного дизайна. Если же я ошибаюсь, посмотрите видеоролик по медиа запросам.

Адаптивный дизайн так популярен сейчас, что пара лишних советов по улучшению разработки сайтов и приложений под множество устройств не помешает. Так вот вам мои советы по CSS.

Совет 1: не используйте разрешения экранов конкретных устройств

Ну тут все понятно без лишних слов. Просто в качестве напоминания, на тот случай, если вы не работали с этой лучшей практикой, стоит вспомнить все еще раз.

Разрешения экрана под конкретные устройства легко определить в вашем коде медиа запросов. Выглядеть это будет вот так (в комментариях пояснения):

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это разрешения для устройств Apple с «магическими» значениями 768px и 1024px. А что если у пользователя экран 1025px или 1023px? Медиа запросы не сработают, и стили под это устройство не применятся. Иногда может возникнуть потребность в точных значениях разрешений экрана, но такой код считается признаком плохого тона. Так как же поступить?

Совет 2: установите главные разрешения и переходные

Во время работы над адаптивным проектом я, обычно, задаю произвольные целочисленные точки, которые приблизительно совпадают с разрешениями большинства смартфонов, планшетов, настольных ПК и ноутбуков. Лично я использовал бы следующие главные точки. Иногда они могут меняться в зависимости от проекта:

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

Совет 3: используйте в качестве единиц измерения em или rem

Используйте вместо px одну из этих относительных единиц измерения для лучшей масштабируемости на случай, если пользователь увеличит страницу или размер текста. Как пример, мои основные точки с единицами измерения em будут выглядеть следующим образом.

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree