Основы адаптивной верстки своими руками без магии front-end фреймворков

Сегодня web-разработчика, который делает адаптивный дизайн сам, приходится искать днем с огнем. Эта статья поможет тем, кто решил разобраться в основах без волшебства front-end-фреймворков.

Основы адаптивной верстки своими руками без магии front-end фреймворков

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

 

С чего начать

Использование мета-тега viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

 где:

  • width=device-width – задает область просмотра контента, равной ширине экрана мобильного устройства;
  • initial-scale=1.0 – задает начальный масштаб, с множителем от 0.1 до 10;
  • maximum-scale=1.0 – задает максимальный масштаб, с множителем в рамках 0.1-10;
  • user-scalable=no – запрещает взаимодействеие со страницей, кроме горизонтальной и вертикальной прокрутки.

Любой из этих параметров может быть исключен из общего списка. 

 

Настройка таблицы стилей, @media-запросы

Для удобства можно создать отдельный файл, например responsive.css и затем в нем задать типичные разрешения и правила под перестроения дизайна.

  • @media all and (orientation: landscape) - альбомной ориентация, когда ширина больше высоты;
  • @media all and (orientation: portrait) - портретная ориентация, если высота больше ширины;
  • @media screen and (max-width: 320px) - описывает правила для окна, ширина которого больше значения, указанного в запросе, аналогично для height;
  • @media screen and (min-width: 320px) - описывает правила для окна, ширина которого меньше значения, указанного в запросе, аналогично для height;

 

Запросы можно обьединять и микшировать. Пример:

@media all and (orientation: landscape) and (max-width: 1280px) {
/* Запрос позволяет использовать стили для альбомной ориентации с максимальной шириной экрана в 1280 пикселей */
}

 

Содержимое типичного файла с наиболее популярными разрешениями:

@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}

 

Юмореска:

– А у вас Василий всё еще работает верстальщиком? 
– Работает.
– Тогда пусть наверстает упущенное.

×
Предложите тему или интересную задачу для следующей статьи:
×

Ждем входящих данных...