• Телефон: +7(3462) 330-200
  • Email site-surgut@mail.ru

Блог

Или другими словами адаптивная верстка - "Responsive makeup" (отзывчивая верстка). Если вы хотите иметь понятие, что такое адаптивная верстка? Тогда прочитав эту краткую инструкцию вы будите иметь начальное представление, что такое адаптивный сайт - адаптивная верстка.

Адаптивная верстка - автоматически подстраивается, или правильно сказать адаптируется, под разрешение экрана устройства на котором вы просматриваете этот адаптивный сайт. Другими словами если просматривать адаптивный сайт на большом экране, тогда отображение этого сайта будет одно, а если просматривать на мобильном устройстве, то отображение будет совсем другим. Понятно, что это сделано для удобства пользователя просматривающего страницы сайта(адаптивного).

И так, с главным принципом, что такое адаптивная верстка разобрались, далее стоит разобрать некоторые понятия адаптивной верстки. И сюда входят такие понятия как:

  • Гибкие шрифты
  • Гибкий макет на основе сетки
  • Гибкие изображения
  • Медиазапросы

Теперь давайте остановимся возле каждого из этих пунктов немного поподробнее.

Гибкие шрифты - шрифты, которые заданы не жестко в px(пикселях), а в em - величина которая может меняться. Например, вот величина жестко задана в размере - font-size: 16px. А вот величина которая может меняться - font-size: 2.5em;

Гибкий макет на основе сетки - это сетка которая может изменяться, и вместо величины px используется %. Например на большом мониторе можно показать 3 колонки, а на мобильном устройстве одну колонку, чтобы было удобно смотреть. И вот для этого существуют гибкие сетки.

Гибкие изображения - это те изображения, которые не статично стоят, а меняют свой размер в зависимости от разрешения экрана устройства и ширины колонки.

Медиазапросы - например вы задали ширину колонки в 600px, а если ширина области просмотра устройства меньше 400px, то ширину колонки нужно установить например в 150px. Тогда в этом вам помогут некие условия, которые либо выполняются, либо не выполняются, и такие условия делаются с помощью медиазапросов.

И так, на этом все, и я думаю вы в общих чертах поняли, что из себя представляет адаптивная верстка. Но я обязательно в будущем буду писать дополнительные статьи для этой темы, чтобы более детально выучить вопрос об адаптивных сайтах.

Сайты Сургута

 

 Все права защищены. 2015. Копирование материалов сайта запрещено.

FLICKER GALLERY

NEWSLETTER

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Search