Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Смотрите полный экран и расшифровку стенограммы для медиа-запросов здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье я добавил для вас новый быстрый совет / урок о медиа-запросах.
M для медиа-запросов
Я бы рискнул предположить, что подавляющее большинство веб-дизайнеров и разработчиков знакомы с концепцией адаптивного дизайна в наши дни. Если нет, посмотрите экранную заставку Media Queries .
Поскольку адаптивный дизайн очень популярен, это хорошее место, чтобы взять пару советов по улучшению способов разработки веб-сайтов и приложений для нескольких устройств. Вот пара советов CSS, чтобы помочь вам.
Совет 1: не используйте определенные точки останова устройства
Надеюсь, это само собой разумеется, но на случай, если вам нужно напоминание или вы не сталкивались с этой лучшей практикой раньше, я подумал, что это стоит повторить.
Специфичные для устройства точки останова легко идентифицируются в вашем коде с помощью медиазапросов, которые выглядят так (комментарии добавлены для ясности):
/* 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 и имеют значения «магического числа», такие как 768px1024px
Что если окно пользователя имеет 1025px1023px
Медиа-запросы не будут влиять, и стили для этого размера устройства не будут применяться.
Иногда вам может понадобиться очень конкретное значение для вашей точки останова (подробнее об этом через секунду), но, насколько я понимаю, просмотр этих точек останова для конкретного устройства — это запах кода.
Так что вы должны сделать вместо этого?
Совет 2: Установите основные контрольные точки и второстепенные настройки
Работая над адаптивным проектом, я склонен устанавливать произвольные целые точки прерывания, которые приблизительно соответствуют размерам большинства телефонов, планшетов и настольных / портативных устройств.
Я хотел бы использовать следующие основные контрольные точки (хотя иногда это может быть изменено в зависимости от проекта):
/* large phones and small tablets */
@media screen and (min-width: 500px;) {}
/* tablets and small monitors */
@media screen and (min-width: 800px;) {}
/* laptops and desktops */
@media screen and (min-width: 1200px;) {}
Использование этих точек останова не ограничивает изменение дизайна только в этих точках, но дает хорошую основу для работы с тремя основными типами устройств.
Для основанной на контенте настройки дизайна (т. Е. Когда контент начинает выглядеть поврежденным, несбалансированным или не совсем подходящим), вы можете затем использовать точки настройки, чтобы подтолкнуть элементы вокруг и отточить детали вашего проекта.
/* tweak position of share button */
@media screen and (min-width: 1150px;) {
margin-right: 1em;
}
Совет 3: используйте emrem
Вместо px В качестве примера, мои основные контрольные точки, приведенные выше, будут выглядеть следующим образом при измерении в EMS
/* 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;) {}