От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с медиа запросами.
М значит медиа запросы
Рискну предположить, что подавляющее большинство веб-дизайнеров и разработчиков знакомы с концепцией адаптивного дизайна. Если же я ошибаюсь, посмотрите видеоролик по медиа запросам.
Адаптивный дизайн так популярен сейчас, что пара лишних советов по улучшению разработки сайтов и приложений под множество устройств не помешает. Так вот вам мои советы по CSS.
Совет 1: не используйте разрешения экранов конкретных устройств
Ну тут все понятно без лишних слов. Просто в качестве напоминания, на тот случай, если вы не работали с этой лучшей практикой, стоит вспомнить все еще раз.
Разрешения экрана под конкретные устройства легко определить в вашем коде медиа запросов. Выглядеть это будет вот так (в комментариях пояснения):
|
1 2 3 4 5 6 7 8 |
/* ipad portrait */ @media screen and (min-width: 768px;) {} /* ipad landscape */ @media screen and (min-width: 1024px;) {} /* iphone */ @media screen and (min-width: 320px) and (max-width: 480px;) {} |
Это разрешения для устройств Apple с «магическими» значениями 768px и 1024px. А что если у пользователя экран 1025px или 1023px? Медиа запросы не сработают, и стили под это устройство не применятся. Иногда может возникнуть потребность в точных значениях разрешений экрана, но такой код считается признаком плохого тона. Так как же поступить?
Совет 2: установите главные разрешения и переходные
Во время работы над адаптивным проектом я, обычно, задаю произвольные целочисленные точки, которые приблизительно совпадают с разрешениями большинства смартфонов, планшетов, настольных ПК и ноутбуков. Лично я использовал бы следующие главные точки. Иногда они могут меняться в зависимости от проекта:
|
1 2 3 4 5 6 7 8 |
/* большие телефоны и маленькие планшеты */ @media screen and (min-width: 500px;) {} /* планшеты и маленькие мониторы */ @media screen and (min-width: 800px;) {} /* ноутбуки и настольные ПК */ @media screen and (min-width: 1200px;) {} |
Эти точки не ограничивают дизайн, а задают хорошую почву для работы с тремя типами устройств. В дизайне, основной частью которого является контент (когда контент начинает смотреться неправильно, несбалансированно или не влезает в блок), можно задать промежуточные точки и подталкивать элементы, полируя мелкие детали.
|
1 2 3 4 |
/* промежуточная позиция для кнопки репоста */ @media screen and (min-width: 1150px;) { margin-right: 1em; } |
Совет 3: используйте в качестве единиц измерения em или rem
Используйте вместо px одну из этих относительных единиц измерения для лучшей масштабируемости на случай, если пользователь увеличит страницу или размер текста. Как пример, мои основные точки с единицами измерения em будут выглядеть следующим образом.
|
1 2 3 4 5 6 7 8 |
/* 500px / 16px = 31.25em */ @media screen and (min-width: 31.25em;) {} /* 800px / 16px = 50em */ @media screen and (min-width: 50em;) {} /* 1200px / 16px = 75em */ @media screen and (min-width: 75em;) {} |
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
