Jump to content
  • 0
Sign in to follow this  
Taurus

Адаптивность в новом Muse. Как понять логику работы адаптивности ?

Question

Taurus    2

            Всех приветствую.

Наверняка уже многие разбираются с новой версией Muse и возникает множество вопросов по новациям.

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

   Имеем макет с шириной 960px. Создаем первоначальную шапку для первой точки остановки, которая естественно 960 px.

   Допустим создаём вторую точку остановки на отметке 790 px, и подстраиваем шапку под данное значение: перемещаем элементы, уменьшаем где-то шрифт и т.д

   Если навести на соответствующий цветной отрезок шкалы, (где показаны все точки остановки), видим интересные подсказки

Для первого отрезка имеем подсказки "ширина браузера от 791 px до бесконечности" , "размер страницы от 791 px до 960 px" (лиловый отрезок шкалы). 

Для второго отрезка имеем подсказки "ширина браузера от 0 px до 790 px", "размер страницы 320 px до 790 px " (голубой отрезок шкалы).

   Что означает данная подсказка ? Я так понимаю, что сайт, который открывается с устройства, имеющие разрешение, например, 800 px X 1280 px.

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

   Открываем сервис, в котором хотим виртуально посмотреть нашу шапку на различных устройствах.

Я выбираю для этого сервис Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

   Интересуют все разрешения экрана для Desktop. Уже тут начинается интересное наблюдение. У меня монитор 1920x1200, выбирают в разделе сайта Desktop

1600x 900 получаем горизонтальную прокрутку. Думаю, ладно, пусть себе показывает виртуально, ведь у меня на 1920x1200 её нет.

   Но когда я уже выбираю раздел Tablet и устройство Kindle Fire Hd (800 x 1280), то получаем перемещение части адреса (.com) e-mail на следующую строку !!!

Почему это происходит ? Ведь по идее если в макете всё отлично смотрится при точке 791 px, (а следуя подсказке, покрывается ширина браузера от 791 px до бесконечности) почему происходит перенос данных для устройства от 800 x 1280 ?

       Если исходить из разнообразия разрешений устройств, как их все охватить ? Какие у кого приемы в этом аспекте ?

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

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

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

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

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
15 минуту назад, Taurus сказал:

Что означает данная подсказка ?

Ох не те вопросы Вы задаете)). Это означает буквально то что и написано в подсказке. Как еще объяснить? :blink:.
А в целом и по всему остальному - вы добавляете точки остановки только в тех местах (или прямо перед теми), где ваш дизайн ломается и редактируете его.
Если у Вас на 790 съезжает текст в другую строку, то создайте здесь точку остановки и отредактируйте текст так, что бы он не съезжал. И так далее - сужаете, дизайн ломается, добавляете брейпойнт, редактируете > сужаете, дизайн ломается, добавляете брейпойнт, редактируете>...

Перед созданием сайта надо продумывать компоновку, а не просто так набросать все что в голову взбрело и пытаться делать это всё отзывчивым. Надо предвидеть то как могут повести себя элементы и компоновать контент с этим учетом. Лучшая практика в этом случае - mobile first. То есть самым первым вы начинаете разрабатывать самую маленькую точку остановки и постепенно расширяться, добавляя больше контента для больших точек остановки. Такой подход позволит вам  максимально оптимизировать то что будет отображаться на мобильных устройствах,  не запутаться в том что скрыть на мобильных, потому что при таком подходе вы будете только добавлять , использовать минимальное количество точек остановки и в конце выйти на грамотно скомпонованную десктопную версию сайта, которую не нужно будет дополнительно редактировать

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
Taurus    2
2 минуты назад, Павел Хомерики сказал:

Ох не те вопросы Вы задаете)). Это означает буквально то что и написано в подсказке. Как еще объяснить? :blink:.
А в целом и по всему остальному - вы добавляете точки остановки только в тех местах (или прямо перед теми), где ваш дизайн ломается и редактируете его.
Если у Вас на 790 съезжает текст в другую строку, то создайте здесь точку остановки и отредактируйте текст так, что бы он не съезжал. И так далее - сужаете, дизайн ломается, добавляете брейпойнт, редактируете > сужаете, дизайн ломается, добавляете брейпойнт, редактируете>...

Перед созданием сайта надо продумывать компоновку, а не просто так набросать все что в голову взбрело и пытаться делать это всё отзывчивым. Надо предвидеть то как могут повести себя элементы и компоновать контент с этим учетом. Лучшая практика в этом случае - mobile first. То есть самым первым вы начинаете разрабатывать самую маленькую точку остановки и постепенно расширяться, добавляя больше контента для больших точек остановки. Такой подход позволит вам  максимально оптимизировать то что будет отображаться на мобильных устройствах,  не запутаться в том что скрыть на мобильных, потому что при таком подходе вы будете только добавлять , использовать минимальное количество точек остановки и в конце выйти на грамотно скомпонованную десктопную версию сайта, которую не нужно будет дополнительно редактировать

    В том-то и дело, что изначально я решил, что если есть такая подсказка, то она подтверждает отсутствие "ломки" макета, начиная от точки остановки к увеличению. Т.е. думал так, что если макет имеет нормальный вид на 790 px. и на 960 px, то диапазон между данными значениями в принципе не должен иметь проблем. Соответственно, устройство с разрешением 800 x 1280, попадает в этот диапазон и по идее должен был отобразить макет нормально. Да, я думал, над тем, от чего идти "от частичного к  целому" или от "целого к частичному".  Получается, что выход один  использовать тот ползунок и проверять всё попиксельно, поступательно двагаясь по шкале. Спасибо за совет.

Share this post


Link to post
  • 0
Muks    0

Привет. вопрос по адаптивности:

1.Я правильно понимаю, что ранее было 3 шаблона (комп,планшет и телефон), теперь это убрали и перенесли все в 1 место? т.е. при передвижении на точку др. размера также редактировать сайт под этот типо размер?

2.есть сайт,сделанный в пред версии Мьюз. можно ли его перевести в адаптивный?

в св-вах поменял, но при сужении текст поля и кпртинки остаются на своих местах.

если я яправ в 1 вопросе,то 2 отпадает)

Share this post


Link to post
  • 0
1 час назад, Muks сказал:

Привет. вопрос по адаптивности:

1.Я правильно понимаю, что ранее было 3 шаблона (комп,планшет и телефон), теперь это убрали и перенесли все в 1 место? т.е. при передвижении на точку др. размера также редактировать сайт под этот типо размер?

2.есть сайт,сделанный в пред версии Мьюз. можно ли его перевести в адаптивный?

в св-вах поменял, но при сужении текст поля и кпртинки остаются на своих местах.

если я яправ в 1 вопросе,то 2 отпадает)

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

2) Можно. Есть волшебная кнопка F1 или...
a2X7nv3syg0Wem.png

...там всё подробно описано

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...