По просьбе коллеги, выкладываю порядок действий для создания адаптивного дизайна.
1. Значит выставляем в свойствах страницы "Выравнивание горизонтально и вертикально", далее в свойствах страницы в "Метатеги" ставим галочку "Автоматически включать мета-тэг viewport в адаптивные страницы".
2. Теперь нам нужно создать слои, растягиваем слои на всю ширину страницы, тютелька в тютельку, в свойствах слоя ставим выравнивание по центру, галочку ставим - относительная горизонтальная размерность. Слои стыкуем так, что бы они плотно прилегали друг к другу, и появлялась синяя оконтовка, означающая, что слои норм законнектились. Затем во вкладке "Вид"ставим галочки "Неадаптивные объекты", "Отрисовывать скрытые объекты". Затем создаём основной проект (точки останова выставляем в последний момент).
3. Когда вы делаете основной проект всегда в свойствах текста ставьте галочку в "Использовать адаптивные шрифты" и "Не кодировать символы". В одиночных строчках, делайте центрирование текста желательно по центру. С картинками проблем нет никаких в принципе. Далее - "Фигуры"(шэйп). Что бы сделать фигуры адаптивными, нужно в свойстах фигуры. в подразделе "Публикация", выбрать пункт в выпавшем списке "Публиковать как CSS". И вообще, если появились у Вас элементы с красной каёмкой, значит они не адаптивные, их надо публиковать как CSS для адаптивности.Области форм проблем не вызывают, можно лепить их как угодно, эдитбоксы тоже, всякие тексты в кнопках не делайте длинными, так как тело кнопки адаптируется, а текст кнопки ни фига. Более никакие элементы проблем вызвать не должны, если есть траблы - пишите. Делаем теперь точки останова. При создании точек останова не забывайте в управлении точек останова ставить галочки "Включить min-width в медиа запросы CSS", то есть точки останова добавляйте через управление точками останова, а не через квадратик с зелёным плюсиком.
4. Далее. идем от больших точек останова, к меньшим, это не строго принципиально, но гораздо удобнее.
Если Вы перешли допустим на точку останова 980. то соответственно и все слои должны быть шириной 980 и так далее. Естественно все элементы должны быть в своих "родных" слоях, ничего не должно торчать за пределы слоёв однозначно.
Если на Вашей индексной(основной) странице проделано всё как я описал (поставили галочки в шрифтах где надо, опубликовали формы как CSS), проблем не должно возникнуть. Теперь о самом важном, на всех точках останова нужно соблюдать строжайше что бы тютелька в тютельку слои были по ширине страницы, и коннектились между собой. Если Возникает ситуация, что какой то элемент сильно большой для какой то точки останова, и его нужно скрыть, обязательно уменьшайте его почти до мизера, и скрывайте ОБЯЗАТЕЛЬНО в этом же слое, то есть не за пределами слоя, ни в другом слое, а именно в "родном" слое, в котором он находился изначально. Если Вы всё выполнили согласно моим инструкциям, проблем с адаптивностью у Вас возникнуть не должно, если есть, перечитайте внимательно, или задавайте вопросы здесь. Отвечать буду только на толковые вопросы, на простые найдёте на форуме ответы в других темах писали не раз об этом.
В примере (просто пример) мало точек останова, нормальный дизайн предполагает 5-7 точек останова минимум, чем больше точек останова, тем качественней адаптация дизайна в целом
скачать исходники(wbs): https://yadi.sk/d/NwynFRNGhjSQo
