Происхождение «сначала мобильного»
Идея «сначала мобильного» в отношении Responsive Design возникла в то время, когда браузеры для мобильных устройств были гораздо менее способными, чем те, которые вы могли бы найти на настольном устройстве. Многие из них вообще не поддерживали медиазапросы, поэтому идея создания причудливого дизайна рабочего стола и последующего использования стилей с использованием медиазапросов для узкого окна просмотра не имеет смысла.
Отсутствие поддержки медиазапросов фактически является первым медиазапросом.
- Брайан Ригер
Мобильный прежде всего актуален?
Несмотря на то, что браузеры для мобильных устройств догнали своих настольных собратьев, «mobile first» по-прежнему является наиболее логичным способом написания ваших стилей.
Я предпочитаю думать в терминах «избегания отмены предыдущих деклараций стиля». Аддитивный подход, а не написание стилей и последующее их переопределение, почти всегда приводит к более компактной таблице стилей. Стили, подходящие для большинства / всех устройств, должны быть найдены вне медиазапросов, в то время как стили, относящиеся только к конкретному окну просмотра, должны быть позади медиазапроса.
Сравните подход «настольный компьютер»:
.column {
float: left;
width: 50%;
}
@media all and (max-width: 50em) {
.column {
float: none;
width: auto;
}
}
Для подхода «сначала мобильный»:
@media all and (min-width: 50em) {
.column {
float: left;
width: 50%;
}
}
Результаты одинаковы, но позже они более компактны. Образцы стилей беззастенчиво скопированы из «7 привычек высокоэффективных медиа-запросов» Брэда Фроста .
Есть несколько редких исключений, когда «рабочий стол сначала» более уместен, чем наоборот. Наиболее заметным из них является то, что вы делаете такие вещи, как адаптивные таблицы. Более широкие видовые окна будут хотеть стили по умолчанию для таблиц, но узкий видовой экран захочет переопределить все это так, чтобы содержимое могло быть сложено вертикально.
Не разбивайте свои таблицы стилей
Одна вещь, которую вы абсолютно не должны делать, это разбить ваши отзывчивые стили на отдельные CSS-файлы и использовать атрибут media в элементе link. Это имеет нежелательное последствие того, что UA загружает все связанные таблицы стилей (т. Е. Для этого нет улучшения скорости).
<!-- this is bad, don't do this -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
Итак, сначала код должен быть мобильным, но как насчет подхода к дизайну?
Я придерживаюсь мнения, что это не имеет значения. Макеты для всех видовых экранов, имеющих отношение к дизайну, должны быть сделаны (это может включать всего 2 или целых 5, если вы учитываете любые незначительные точки останова, которые вам могут понадобиться!), Порядок не имеет значения в конце. Многим дизайнерам не хватает дисциплины, чтобы начать с макета рабочего стола, и они считают, что проще начать с мобильного макета.
Если вы хотите начать с макета рабочего стола, вы должны избегать соблазна заполнить все эти славные пробелы беспорядком, который не улучшает содержание этой страницы. Вы действительно нуждаетесь в том 800x600 запасном фото улыбающейся женщины, держащей телефон? Это просто стоит мобильному пользователю дополнительные деньги, чтобы загрузить бесполезный пух, и это просто визуальное отвлечение для пользователя настольного компьютера, чтобы пропустить мимо.