Создание адаптивного сайта при помощи CSS.

Раньше, сайты не пользовались большим спросом и не были адаптивными, но вскоре, с улучшением технологий, спрос на адаптивные сайты вырос. С каждым днем все больше людей используют девайсы с выходом в интернет. В наше время без телефона никуда, он всегда находится под рукой, человек может в любом месте, в любое время найти нужную для себя информацию. На обычный сайт можно также зайти с мобильного устройства, но иногда, могут возникнуть определенные нюансы при просмотре. На небольшом экране, при чтении отдельных блоков текста, нужно масштабировать страницу, при этом теряется читабельность, а также удобство сайта, приходится постоянно приближать, пролистывать сайт. Чтобы решить все эти проблемы, разработчики создали сайты, которые способны удобно отобразить информацию на любом девайсе.

CSS что это?

Для начала узнаем и разберемся что же такое CSS. CSS (Cascading Style Sheets) - это каскадные таблицы стилей, которые используют для описания макета или форматирования веб-страницы. CSS-фреймворк - это фреймворк, который создали, чтобы упростить работу верстальщикам, для быстрой разработки, а также, чтобы исключить максимально возможное число ошибок верстки. Такие фреймворки, позволяют корректно отображать сайты на любых устройствах и любых размеров.

Потому что:

• Поддержание кроссбраузерности.
• Поддержание разных устройств и их размеров экранов.
• Быстрота в разработке.
• Единообразный код. Когда работаешь в команде, очень важно снизить число разногласий.

Разработчики используют CSS, дабы не прописывать все стили вручную.

Виды версток.

Давайте разберем самые основные виды, их разницу, а также принципы, которые используют при реализации.

Выделяют четыре основных вида:

• Фиксированная верстка.
• Резиновая верстка.
• Адаптивная верстка.
• Отзывчивая верстка.

Рассмотрим каждый вид по отдельности.

Фиксированная верстка.

(Fixed Layout) Фиксированная верстка — это такой подход, который подразумевает создание страниц сайта по заданной ширине. На странице сама ширина компонентов остается неизменной. На мониторах, у которых маленькое разрешение, будет появляться горизонтальная полоса прокрутки. Такой тип верстки не будет удобным и не подойдет для отображения информаций на мобильных устройствах.

Пример демонстрации строгого задания ширины для тега body:

Резиновая верстка.

(Elastic Layout) Резиновая верстка - позволяет менять размеры компонентам сайта, и исходя из размера окна браузера, растягиваются от и до минимальных и максимальных размеров (они указаны). Помогает достигнуть этого использование относительных значений: минимальная и максимальная ширина (min-width / max-width), минимальная и максимальная высота (min-height / max-height).

Примеры, которые используются при такой техники:

Адаптивная верстка.

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

Пример:

В данном примере задается ширина div - она равна 960px, подходит для любых устройств, у которых ширина меньше 1200px и 320px для любых устройств, у которых ширина меньше 480px.

“Самая главная вещь при разработке программ — ясно представлять конечную цель.”

Отзывчивая верстка.

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

Ниже в представленном примере заданная ширина div равная 50% от размера родительского компонента для любых устройств, у которых ширина меньше 1200px и 100% для любых устройств, у которых ширина меньше 480px.

Принципы адаптивной верстки.

Проект нужно снабдить такими свойствами, которые будут удобны для следующей универсальной подстройки, а именно:

• Прочностью. Мобильная версия должна быть похожа по оформлению на десктопную, также важно, чтобы на была компактной, дабы во время открытия, информационные блоки выстраивались по порядку автоматически.
• Относительность единиц измерения. Нужно задавать координаты для объектов, которые есть на каждом устройстве. Равняться необходимо по верхней границе экрана.
• Использование контрольных точек. Привязка происходит к элементам, у которых местоположение останется статистическим, пока не осуществиться вход с другого устройства. Это можно назвать фиксаторами, которые на дадут изображениям “уползти” за границы.
• Минимальные и максимальные значения. Задавать лимиты высоты и ширины пикселей нужно так, чтобы любой контент или же текстовая информация отображалась корректно на часть дисплея или же на весь дисплей. Главное, чтобы она могла остаться читабельной и не растягивалась.
• Вложенность объектов. Чтобы не не возникало необходимости подстраивать блоки, их следует отправлять в общий контейнер, чтобы они были взаимосвязаны друг с другом.Такой способ работает не только с лого и кнопками, но также и с другими объектами.
• Хорошие правильные шрифты. Чтобы шрифты уменьшались или увеличивались автоматически, их необходимо перевести в web-формат. Но в таком случае, они будут подгружаться как адаптивный сайт, у которого ресурс отображается не только быстро, но и корректно.
• Грамотно использованная графика. Детализированное изображение рекомендуется сделать растровым в случае, если нет, то векторным. Все картинки лучше сжимать, чтобы даже старые браузеры смогли их поддержать.
• Соблюдение подходящих размеров. Разрешения: 320, 480px - разрешения для смартфонов, 768 - разрешение для различных планшетов, 1024 - разрешение для нетбуков, от 1280 начинаются разрешения для стационарных компьютеров.
• Правильные медиа-запросы. Благодаря правильным медиа-запросам, во время создания ресурсов задаются: условия показа объектов и типы поддерживаемых ресурсов.

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