Как и зачем настраивать Разрыв Строки

Лучшая практика > Этап 2 - Шаблон > Как создать дружественный для мобильных устройств веб-сайт > Как создать Адаптивный веб-сайт >

Как и зачем настраивать Разрыв Строки

Previous pageReturn to chapter overviewNext page

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

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

Разрыв Строки служит для того, чтобы Объект или Блок Объектов, находящийся на одной строке Модульной Сетки, устанавливался на новой строке при разрешениях ниже разрешения выбранной точки останова. В действительности, установить Разрыв Строки означает установить «вынужденный» переход на новую строку.

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

Изображение 1. Сетка в режиме Разрыв Строки

Изображение 1. Сетка в режиме Разрыв Строки

Для лучшего понимания можно представить изображение на примере, где, при точке останова Рабочий стол, установлены Разрывы Строки до Объекта 3 и после Объекта 7:

Изображение 2. Структура для точки останова Рабочий стол

Изображение 2. Структура для точки останова Рабочий стол

Следует отметить, что символ Разрыв Строки отражает установленный порядок. Таким образом, можно лучше представить, как например, Объект 7 будет размещен над Блоком Объектов 8, 9 и 10, учитывая, что упорядочивание Объектов для этой строки идет справа налево.

Учитывая заданное упорядочиваине,установленные разрывы строки и то, что Объект 2 сделан невидимым, структура Страницы при точке останова, следующей за точкой останова Рабочий стол выглядит таким образом:

Изображение 3. Структура для точки останова, следующей за точкой останова Рабочий стол

Изображение 3. Структура для точки останова, следующей за точкой останова Рабочий стол

Как видно, Объект 2, который стал невидимым, отсутствует, но это не меняет упорядочивание Объектов, которое остается неизменным. Разрыв Строки вынуждает Объекты 3 и 4 размещаться на 2 строке Сетки, оставляя Объект 1 полностью занимать строку 1. Без разрыва Строки Объекты 1, 3 и 4 продолжали бы располагаться рядом друг с другом на строке 1, занимая каждый 1/3 ширины пространства.

Аналогично, второй разрыв Строки вынуждает Объекты 8, 9 и 10 больше не быть частью единого Блока, а располагаться на новых строках, под Объектом 7.

Следует отметить, что когда Объект располагается в нескольких колонках, в переходе от одной точки останова до последующей, пропорция по ширине остается неизменной. В изображении 1 видно, например, что точка останова Рабочий стол Объект 5 занимает 3 колонки из имеющихся 4: это значи, что он занимает 75% ширины строки. Эта пропорция остается неизменной также и при следующей точке останова (Изображение 3), даже если другие Объекты, выровненные по ней по ширине, больше не соблюдают предыдущее расположение.

 


Лучшая практика:

-

Как создать Адаптивный веб-сайт

-

Как происходит упорядочивание Объектов