Перейти к содержимому
Участников клуба
43 531
mckey

Адаптивная композиция

Рекомендуемые сообщения

mckey    0

Возник вопрос, связанный с адаптивным дизайном.

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

Например, беру простую композицию, помещаю в нее картинку, заголовок, текст и кнопку (считаем - 4шт). Получается что-то вроде "Специальные новости". При изменении размеров браузера, естественно, все расползается.

Под следующую точку остановки, а их у меня - 1280 - 1024 - 960 - 720 - 480 - 320 (6шт) приходится все подгонять вручную. Теперь умножим на количество слоев в слайдере (5 шт) Получается, что ( 4*6*5 ) приходиться менять 120 параметров! И попробуй отклонись хоть на пиксель, картинка начинает "скакать".

К чему я это? Подскажите, пожалуйста, есть ли возможность адаптировать сразу всю композицию? Хотя бы послойно. Или придется все делать "ручками"?

Заранее благодарен за ответы и рекомендации!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
Please login or register to see this quote.

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

  • Upvote 3

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
mckey    0

Здравствуйте, Павел! Большое спасибо за ответ! С композицией все ясно. Будем ждать улучшения возможностей программы.

С Вашего позволения, я продолжу тему, не относящуюся к основной. Как видите, сайт достаточно плотно "укомплектован" различными элементами. Все они имеют разные размеры и расположение. И этих элементов будет шесть - семь "этажей" информации. Если просто сдвигать ползунок и фиксировать точки остановки в момент конфликтов, то их (точек) получится в несколько раз больше. Смело можно ставить каждые 50px.

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

Кстати, раз уж зашел разговор, какие, на Ваш взгляд, разрешения являются правильными? Это так - ради ликбеза.

К сожалению, в Сети очень мало обучающих материалов по адаптивности в Muse. Приходится пользоваться малоэффективным "методом тыка". Не судите строго - это моя первая "проба пера".

Please login or register to see this attachment.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Please login or register to see this quote.

Разрешений сейчас сотни. Те, что выбрали вы - вполне нормальные, только надо учитывать не размер монитора, а размер окна браузера. Например при разрешении 1280, реальное окно браузера будет 1263. На мобильных разрешениях браузер не учитывается, так как там нет такого скролл бара как на компьютерах.

  • Upvote 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
mckey    0
Please login or register to see this quote.

спасибо!

Надо будет сделать окончательные варианты (мобильную версию я еще не рассматривал - там совсем другой дизайн получится) верхних "этажей" и закинуть себе на сервер - посмотреть в реале на разных браузерах.

Еще раз благодарю Вас за рекомендации!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
akademik    0

Возможно для кого-то будет полезным, (сам подсмотрел и пользуюсь):

для более удобной работы с дизайнерским "эскизом" для меня оказалось удобным применение на странице колонок, причем при использовании точек перехода в следующем соотношении:

480 px - 6 кол

768 px - 5 кол

980 px - 8 кол

1185 px - 10 кол

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Оставлять сообщения могут только участники клуба

Вступите в клуб или войдите под своим аккаунт, чтобы писать сообщения


Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
×