Как создать адаптивные макеты в эскизе (с каплей жидкости)

Мы хотим, чтобы наша группа была центрирована в соответствии с «холстом».

Закрепление объектов

Давайте повторим эти шаги с пунктами меню, только на этот раз мы будем закреплять слои, а не выравнивать их. Нам не нужно группировать логотип, так как он состоит только из одного слоя. Вернитесь к модальности Edit Constraints и введите «50» в верхнее и левое поля ввода на вкладке «Pinning».

По сути это означает, что слой всегда будет смещен на 50px от верхней и левой сторон холста.

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

Затем выберите три слоя в правой части меню и сгруппируйте их ( команда + G ) вместе. Повторите шаги ограничений еще раз, только на этот раз примените ограничения смещения 50px к верхней и правой сторонам холста, вместо верхней и левой.

Применение изменений

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

Как видите, логотип и пункты меню в заголовке были «закреплены» по краям холста с имитированным полем в 50 пикселей. Нажмите команду + Z, чтобы отменить изменения, так как мы не хотим, чтобы наша версия для настольного компьютера отражала эти ограничения.

Проектирование контейнеров жидкой ширины

Нам не нужно определять какие-либо контейнеры шириной жидкости в этом руководстве, но мы рассмотрим его для полноты. Обычно при объявлении числовых стилей в Инспекторе мы можем использовать математические операции, такие как «100% -100px», что означает, что слой (допустим, мы говорим о ширине) будет охватывать всю ширину монтажной области (или группы , если слой находится внутри одного); минус 100px.

Например: если ширина монтажной области была 1440px, ширина слоя составила бы 1340px — математическая операция выполняется, и ширина является результатом. Однако, если вы объявляете эти стили ширины или высоты в Fluid, он пересчитает результат математической операции при смене устройства в «Предварительном просмотре».