Адаптивная верстка сайтов. Как это работает?

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

Несмотря на то, что языки html и css самые легкие для изучения в IT сфере это не значит, что верстать ПРАВИЛЬНО сможет каждый. Раньше верстка вообще была табличная и не была приспособлена для каких либо сложных элементов. В настоящее время адаптивная верстка сайтов это основополагающий фактор, так как доля мобильных пользователей стремительно растет. Так же наличие или отсутствие адаптивной верстки сильно влияет на SEO-продвижение(органическая выдача).

На чем строится адаптивная верстка сайтов?

1. Мета тег viewport

Принцип работы адаптивной верстки заключается в использовании медиазапросов(@media) зависимых от вьюпорта устройства(viewport).

viewport — это фактическая ширина области просмотра(экрана) на устройстве. Это если простыми словами.

Мета тег viewport пишется в раздел head шаблона и выглядит так.


<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

В атрибуте content мы указали что ширина вьюпорта равна ширине экрана устройства, а масштаб по умолчанию равен 100%. Вы можете указать свои параметры например «width=1000px» или «initial-scale=0.5». Но для того, что бы построить правильную адаптивную верстку для всех устройств значение width должно быть device-width.

Все значения атрибута content метатега viewport:

  • minimum-scale — минимальный масштаб можно указать значения с точкой от 0.1 и выше.
  • maximum-scale — максимальный масштаб можно указать значения с точкой от 0.1 и выше.
  • initial-scale — масштаб по умолчанию можно указать значения с точкой от 0.1 и выше.
  • user-scalable — разрешает или запрещает масштабировать страница 1(да), 0(нет).

2. Медиазапросы css?

Медиазапросы — это блок кода, который применяет стили для конкретного разрешения или диапазона разрешений.

Вариаций написания медиазапросов очень много я лишь покажу самые часто используемые.


@media (min-width: 300px) and (max-width: 600px) {
   /* В этом блоке код будет работать преимущественно на маленьких и больших
    * смартфонах. С размерами вьюпорта от 300 до 600 пикселей. */
}
@media screen and (max-width: 600px) {
   /* В этом блоке код будет работать от 0 до 600 пикселей включительно */
}
@media screen and (min-width: 600px) {
   /* В этом блоке код будет работать от 600 пикселей и выше */
}

Как видите ничего сложного. Данных запросов достаточно. Для построения качественной адаптивной верстки вы
должны сделать переход примерно так:

@media (min-width: 1366px) and (max-width: 1980px) {
   /* Компьютеры и ноутбуки */
}
@media (min-width: 1100px) and (max-width: 1366px) {
   /* Большие планшеты и нетбуки */
}
@media (min-width: 800px) and (max-width: 1100px) {
   /* Обычные планшеты */
}
@media (min-width: 560px) and (max-width: 800px) {
   /* Лопаты или как еще их называют фаблеты */
}
@media (min-width: 300px) and (max-width: 560px) {
   /* Обычные смартфоны и те что побольше */
}

/* На экраны менее 300 по опыту советую не замарачиваться, так как это древние кирпичи */

Примерно вот так и выглядит современный подход к адаптивной верстке сайтов. Многие путают адаптивную верстку с
мобильной версией. Это не так. Кстати разработать версию сайта отдельно для мобильных устройств намного проще
чем писать правильный адаптивный код.

Информация для клиента

Небольшое заключение, так как нас могут читать клиенты хочу внести ясность.

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

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

Кузнецов Семен

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

Это абсолютно бесплатно?

Не волнуйтесь, мы не кусаемся! Отправьте форму или позвоните нам, наш менеджер вас проконсультирует абсолютно бесплатно по всем интересующим вопросам.

*КАК ВАС ЗОВУТ

ВАШ EMAIL

*ВАШ НОМЕР ТЕЛЕФОНА

ОТПРАВЬТЕ НАМ СООБЩЕНИЕ

Отправляя данную форму вы автоматически соглашаетесь с нашей политикой конфиденциальности.

Адреса

115191 г. Москва, ул. Большая Тульская 54к3

354002 г. Сочи, ул. Переулок Виноградный 2А