—»     —»   Руководство по гибким (резиновым) сеткам в адаптивном дизайне
  Раздел: Руководства   Нет комментариев  

Руководство по гибким (резиновым) сеткам в адаптивном дизайне



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

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

Руководство по гибким (резиновым) сеткам в адаптивном дизайне

Что такое гибкие сетки?

Важно узнать о предназначении гибких сеток до того, как начать думать о дизайнах. Вряд ли можно найти лучшее объяснение слову fluid (гибкий), чем написано на Wikipedia.

«Флюид (от лат. fluidis — «текучий») — вещество, поведение которого при деформации может быть описано законами механики жидкостей»

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

Важность гибких сеток

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

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

Как работают гибкие сетки

Мы привыкли разрабатывать дизайн при помощи фиксированных сеток и 960-пиксельной сеточной системы. Затем шаблоны стали адаптивными, в которых мы используем разное количество пикселей при разных размерах экрана. Все было основано на пиксельных шаблонах дизайна. Теперь пришло время создавать дизайны на базе процентных соотношений, и такие дизайны называются гибкими.

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

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




Генераторы и системы гибких сеток

Не так-то просто создать гибкую сетку с нуля, так это на это требуется довольно много времени и усилий. Следовательно, гораздо лучше будет воспользоваться CSS Grid Framework или Grid Generator в качестве основы нашего шаблона. Предлагаем вашему внимаю несколько бесплатных CSS сеточных систем и генераторов.

* tiny fluid grid
* Variable Grid System
* Fluid Grids Calculator - ресурс исчез
* Fluid Grid от Bootstrap

Большинство CSS сеточных платформ предоставляются с расширенными свойствами, и многие из них были протестированы во всех современных браузерах. Цель данного руководства заключается в том, чтобы вы полностью поняли, что такое гибкие сетки. Итак, вам следовало бы сгенерировать гибкую сетку, которая позволит вам изучить основы гибких сеток.

Мы воспользуемся Variable Grid System для генерации гибких сеток по собственным требованиям. Откройте эту ссылку, и введите туда значения переменных. Мы использовали следующие значения.

- Ширина колонки – 60
- Число колонок – 12
- Ширина канавок – 20

* Демо

Затем скачайте гибкую версию CSS-файла. Теперь откройте его в вашем любимом текстовом редакторе или осуществите поиск Grid >> 12 Columns. Нижеприведенный код отображает контент раздела Grid >> 12 Columns.

.container_12 .grid_1 {
width:6.333%;
}

.container_12 .grid_2 {
width:14.667%;
}

.container_12 .grid_3 {
width:23.0%;
}

.container_12 .grid_4 {
width:31.333%;
}

.container_12 .grid_5 {
width:39.667%;
}

.container_12 .grid_6 {
width:48.0%;
}

.container_12 .grid_7 {
width:56.333%;
}

.container_12 .grid_8 {
width:64.667%;
}

.container_12 .grid_9 {
width:73.0%;
}

.container_12 .grid_10 {
width:81.333%;
}

.container_12 .grid_11 {
width:89.667%;
}

.container_12 .grid_12 {
width:98.0%;
}

Как видно, container_12 – это основной контейнер. Каждый ваш элемент в дизайне должен быть внутри контейнера с классом container_12. Затем ширина в процентном соотношении задается классам .grid_1 , .grid_2 … .grid_n. Гибкие сетки создаются при помощи колонок, которые расцениваются как гибкие колонки. Когда размер экрана изменяется, ширина этих колонок также пропорционально изменяется в соответствии с родительским контейнером.

В нашей сетке есть 12 гибких колонок. Итак, давайте взглянем на то, как колонки расположены в нашем шаблоне.

Руководство по гибким (резиновым) сеткам в адаптивном дизайне

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Fluid Grid with Fluid Columns</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="single-columns" class="container_12">
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
<div class="grid_1"><span>1</span></div>
</div>

<div id="double-columns" class="container_12">
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>
<div class="grid_2"><span>2</span></div>

</div>
</body>
</html>

Каждый набор компонентов содержится внутри элемента с классом container_12. Внутри контейнера мы можем использовать класс grid_n для создания гибких колонок с указанной шириной. Используя grid_1 мы можем задать 1/12 от исходной ширины сетки, а grid_2 даст нам 2/12 от исходной ширины.

Вы можете запустить демо и попробовать изменить в размере окно браузера, чтобы посмотреть гибкую сетку в действии.

Вложенные гибкие колонки

Когда у вас есть CSS-платформа, вам будет довольно просто создать сетку с гибкими колонками. Но ведь не все дизайны будут такими же простыми, как пример, который мы показали ранее. Иногда нам нужно будет создавать колонки и строки внутри других колонок и рядов. Давайте посмотрим, как мы можем создавать вложенные гибкие колонки при помощи CSS-файла, который мы сгенерировали ранее.

* Демо

Руководство по гибким (резиновым) сеткам в адаптивном дизайне

Шаблон, представленный выше, содержит 2 ряда. Первый ряд разделен на 2 раздела, состоящих из 6 колонок, и каждый раздел будет снова разделен на 4 раздела из 3 колонок.

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Nested Fluid Columns</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<div class="container_12">
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
<div class="grid_6">
<div class="container_12">
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
<div class="grid_3"><span>3</span></div>
</div>
</div>
</div>

<div class="container_12">
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
<div class="grid_4">
<div class="container_12">
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
<div class="grid_4"><span>4</span></div>
</div>
</div>
</div>
</body>
</html>

Сначала мы создаем основные контейнеры, как мы делали это в предыдущем разделе. Внутри колонки нам нужно создать еще один контейнер с классом container_12 для вложенных колонок. Теперь нам нужно еще 12 колонок внутри 6 основных колонок. Затем 12 под-колонок можно разделить так, как потребуется. Теперь вы должны понимать, как создавать гибкие сетки и как работать с вложенными колонками. Давайте перейдем к дальнейшему изучению гибких сеток.

Дизайн поверх гибких сеток

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

Посмотрите на изображение, приведенное ниже.

Руководство по гибким (резиновым) сеткам в адаптивном дизайне

Так шаблон на гибкой сетке, о чем говорилось в предыдущих частях руководства, будет отображаться на маленьких экранах. Здесь у нас просто сеточные колонки без нужных данных. Даже в этом случае номер 1 не отображается так, как нужно. Когда дело дойдет до реального контента, у нас получится сплошное месиво. В данном сценарии нам нужно выставить ширину колонок для того, чтобы предоставить лучший опыт взаимодействия с пользователями.

Вы можете использовать CSS media queries для настройки ширины колонок для разных экранов. В вышеприведенном сценарии вы можете удвоить ширину колонки и оставить 6 колонок вместо 12, чтобы пользователям было легче читать контент. Так что постарайтесь не зависеть всецело от гибкой сетки в адаптивном дизайне.

Тестирование гибких сеток

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

* Демо

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Fluid Grid Tester</title>
<script type="text/javascript" src="jquery.min.js" ></script>
</head>
<body>
<div id="device_navigation">
<div id='device_panel'>
<a href="javascript:void(0);" onclick="changeGrid('desktop');">Desktop</a>
<a href="javascript:void(0);" onclick="changeGrid('tab_lan');">Tablet Landscape</a>
<a href="javascript:void(0);" onclick="changeGrid('tab_pot');">Tablet Portrait</a>
<a href="javascript:void(0);" onclick="changeGrid('mob_lan');">Mobile Landscape</a>
<a href="javascript:void(0);" onclick="changeGrid('mob_pot');">Mobile Portrait</a>
</div>
<div style="clear:both"></div>
</div>
<div class='main_wrapper'>
<iframe class="wrapper" src="media_query.html"></iframe>
</div>
</body>
</html>

Наша тестовая страница будет иметь базовый HTML-шаблон с jQuery. Элемент с id device_panel будет содержать навигацию для стандартных устройств вроде настольных ПК, мобильных и планшетов. Как только по ссылке будет произведен клик, запустится функция changeGrid, с типом устройства в качестве параметра.

В нижнем разделе у нас будет iframe, который будет использоваться для загрузки нашей гибкой сетки. Гибкая сетка будет содержаться в файле media_query.html. Теперь давайте взглянем на функцию changeGrid.

function changeGrid(device){
if(device == "desktop"){
$(".wrapper").css("width","960px");
}
if(device == "tab_lan"){
$(".wrapper").css("width","768px");
}
if(device == "tab_pot"){
$(".wrapper").css("width","600px");
}
if(device == "mob_lan"){
$(".wrapper").css("width","480px");
}
if(device == "mob_pot"){
$(".wrapper").css("width","320px");
}
}

Как только функция будет запущена, она проверит устройство при помощи введенного параметра. Затем она изменит ширину .wrapper (IFRAME) на стандартную ширину устройства. Далее у нас будет возможность увидеть работу гибких сеток на маленьких экранах.

Гибкая сетка, использованная внутри файла media_query.html, будет похожа на примеры, которые мы обсуждали ранее. Вы можете использовать файлы из демо для оформления кодов. У вас должно получиться нечто похожее на то, что на изображении.

Руководство по гибким (резиновым) сеткам в адаптивном дизайне

* Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Подытожим

Гибкие сетки позволяют вам создавать адаптивные дизайны, которые подходят при работе с разными размерами экранов. Сложность разработки гибкой сетки может быть снижена за счет существующих CSS-платформ. Вы не можете всецело зависеть от гибких сеток, если хотите предоставить пользователям идеальный адаптивный дизайн. Выстраивайте гибкую сетку только по требованиям к вашему дизайну, и старайтесь предоставить лучший опыт взаимодействия своим пользователям. Надеемся, что из этого руководства вы вынесли для себя что-нибудь полезное!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 7786   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930