Jump to content
  • 0
Sign in to follow this  
nikolla

Прописываем код адаптивности в muse

Question

nikolla    2

В поисках,как прописать адаптивность для сайта в muse . Наткнулся на стью. Вот интересующий меня отрывок. 

Вопрос: Может есть еще способы? Кк добиться адаптивности? 

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

Если вы хотите уже сейчас пользоваться этим тегом и при этом чтобы он работал во всех браузерах — также есть для этого решение. Использование Javascript библиотеки Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке..

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

После скачивания файла picturefill.js подключите его между тегами <head> </head>:

1
<script src="picturefill.js"></script>

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0
nikolla    2

Вот еще нашел, про head понятно, а вот что и где прописывать дальше с учетом что адаптация я делаю для лендинга 

Сделать верстку самому

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

Мета-тег viewport
Который определяет тип устройства, с которого посетитель зашел на сайт и установит верную ширину экрана. Просто скопируйте этот код в head своего сайта.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Правило @media
Благодаря которому мы можем прописать разные стили для одних и тех же блоков в своем css-файле. Выглядит это примерно так:

  1. #left{
  2. width: 600px;
  3. float: left;
  4. margin-right: 10px;
  5. }
  6. #right{
  7. width: 400px;
  8. float: right;
  9. }
  10.  
  11. @media only screen and (max-width: 1010px){
  12. #left, #right{
  13. width: 98%;
  14. float: none;
  15. margin: 10px auto;
  16. }
  17. }

В этом примере блок #left имеет ширину 600 пикселей и будет располагаться слева от блока #rightшириной 400 пикселей. Но если разрешение монитора меньше 1010 пикселей, мы убираем обтекание у обоих блоков и растягиваем их на 98% ширины экрана.

И вот таким образом нужно прописать правила под следующие размеры экранов:

  • 320px дляiPhone 3-5 в вертикальном положении
  • 480px для iPhone 3-4 в горизонтальном положении
  • 568px для iPhone 5 в горизонтальном положении
  • 384px для смартфона в вертикальном положении
  • 600px для смартфона в горизонтальном положении
  • 768px для iPad в горизонтальном положении
  • 1024px для iPad в вертикальном положении

И стоит ли тогда при добавлении 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 в head отключать версию для планшета

Share this post


Link to post

Новая статья

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

Очень скоро выйдет обновление Muse, которое вызовет у новичков массу вопросов. В связи с этим, чтобы не возникало недопониманий и разночтений предлагаю определиться с терминами.
Термины предложенные ниже классифицируются самой командой Adobe, а так же мировым сообществом веб разработчиков. И только в русском сегменте присутствует некоторая неграмотность,. И я тоже был такой до недавнего времени (пока глубже не изучил вопрос)
Итак термины:

Адаптивный сайт (adaptive design) - сайт адаптирующийся под различные устройства. Адаптивный сайт имеет несколько макетов под устройства, и каждый из них является статичным. Что мы и наблюдаем уже сейчас в программе Adobe Muse. Реализуется эта технология посредством скрипта, определяющего устройство и вид браузера и в соответствии с параметрами перекидывает пользователя на нужный макет сайта.

Отзывчивый сайт (responsive design) - сайт растягивающийся под различные разрешения экранов, вне зависимости от устройства. Такой сайт имеет один макет, а отзывчивость реализуется через css медиа запросы.

В будущем релизе Muse можно будет строить оба варианта дизайна и даже комбинировать их.

Что касается вашего вопроса -  не занимайтесь ерундой, дождитесь обновления Muse. А если так уж хочется сделать отзывчивый сайт - делайте его в Dreamweawer на Bootstrap - что значительно проще и лучше чем те скрипты которые вы нашли. Ковыряя же код Muse, вы добъетесь того что потеряете контроль над сайтом как в самой программе (она не рассчитана на ковыряние в коде, а как раз наоборот) так и в коде, если вы в нем не разбираетесь. А если разбираетесь, то для вас как для профессионала должно быть абсурдом ковырять код Музы, вместо того что бы использовать Дримвивер. Это тоже самое что в запорожец пихать двигатель от танка - возможно, но зачем? :lol:

Share this post


Link to post
  • 0

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

Как я понимаю, "адобовцы" проект Reflow решили комбинировать c Muse. Если это так, то возможно будет нехилый экспорт всего psd разом и по слоям. Но не забываем про маркетинг. Через следующее обновление и т.д

Share this post


Link to post
  • 0
47 минуты назад, man_from_nowhere сказал:

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

Это и так уже есть в Музе давным давно.  И по слоям и целиком, но в виде картинок, что не всегда хорошо. В виде  css в музе не будет, думаю, никогда, да это и не нужно совершенно.  Не та философия у программы. Функции рефлоу разделили пополам муза и дримвивер. Вот в дримвивере полный экстракт PSD есть уже сейчас - картинки и css. Команда музы даже не задумывается об этом в ближайшей перспективе и пользователи не просят. У разработчиков итак хватает что делать, что бы довести отзывчивость. Подключайтесь к бэта тестированию и будете знать что будет, а что не планируется вообще на ближайший горизонт событий

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...