Адаптивный сайт

Сообщение **stason56** » 25 авг 2016, 22:19

Всем привет!!!
Пожалуйста, помогите с мобильной версией сайта.

Сначала пытался в исходник в каждый слой прописать minwidth, но ничего не заработало.

Потом попробовал сделать так называемый "чувствительный дизайн", т.е. к обычной странице (970пикс) добавил внизу еще одну (т.е. нажал внизу, где default новую мобильную страницу на 320 пикс)
Далал таким образом: копировал тексты и объекты, изменял их размер под 320, а исходные объекты скрывал.
В итоге версия на 970 осталась полупустой, а на мобильная вроди б и ничего, но справа куча белого пространства.
Что-то я сделал не так, но никак не докопаюсь, что конкретно!

Помогите пожалуйста!
заранее благодарен!

Сообщение **sinpai** » 26 авг 2016, 00:38

Перейдите на 11 версию и делайте верстку по сеткам. При этом не забывайте указывать точки останова.

Сообщение **stason56** » 26 авг 2016, 16:26

Большое спасибо за ответ!
Скачал 11 версию, на первый взгляд отличий не увидел внешне, так же создал точку останова 320, не могли бы поподробнее о том, где не забывать указывать эти точки и правильно ли я понимаю, что в формате 320 я скрываю объекты и, клонируя их, подстраиваю под нужный формат? Делал так и в итоге в формате 970 ничего не оказалось после публикации. А в самом веб билдере все на своем месте, все правильно.

Сообщение **sinpai** » 26 авг 2016, 16:47

Посмотрите урок по вашему вопросу по ссылке Layout Grid to create responsive website.
Урок на испанском, но визуально все понятно.
Верстку нужно делать по сеткам!
Если будет совсем непонятно, пишите, набросаю небольшой пример.

Отправлено спустя 6 минут 1 секунду:
Посмотрите пример. Пройдитесь по точкам останова внизу. Так же можно посмотреть в лисе - разработка - адаптивный дизайн.

Сообщение **stason56** » 30 авг 2016, 12:09

Посмотрел урок на испанском, вроди б все понятно, но на практике та же ошибка, что и в вб10.
Использую сетку верстки. в формате 320 текст крупный, поэтому я его копирую и подгоняю по размеру, исходник скрываю. Но в итоге в браузере он задваивается. вкладываю скрины.

В браузере разрешение 970
В браузере 320
в ВБ 970
в ВБ 320

Сообщение **sinpai** » 30 авг 2016, 12:50

В сетках ничего скрывать не надо. Делаем по дефолтному размеру в сетках макет сайта. Ширину сделайте 980.
Потом переходим вниз экрана, нажимаем на Управление точками останова (монитор с шестеренкой), ставим галку "Включить.....", после этого последовательно добавляем точки останова и нажимаем ОК.
В свойствах страницы в Мета-тэгах должна стоять галка Автоматически включать метатэг.
В программе в ВИДе поставьте галку Неадаптивные объекты и Отрисовывать срытые размеры. Соответственно неадаптивные объекты не применяйте.
Дальше настраивайте сами сетки и вставляйте в них все, что вам надо. Не забудьте в свойствах сетки поставить нижнюю точку останова ( в вашем случае 320 ).
Просмотр лучше всего делать через Лису, в ней в Меню-Разработка есть пункт Адаптивный дизайн. Так вы можете посмотреть что происходит на разных разрешениях.
И еще раз обращайтесь к испанцу. Все, что я написал, там показано в такой же последовательности.

P.S. Лично я начинаю с точки останова 480 и при этом на 320 все проходит на ура. На русском языке по сеточному адаптиву ничего нет, так что к буржуйским гуру и методом проб и ошибок. С уверенностью могу сказать - верстать в программе по сеткам очень просто.

Сообщение **Gudwinn** » 30 авг 2016, 14:48

sinpai писал(а):Источник цитаты На русском языке по сеточному адаптиву ничего нет

Скоро будет)) С реальными трюками и всевозможными ухищрениями технология вёрстки по сеткам именно в билдере. Начал записывать курс, но в силу занятости быстро у меня ничего не получается к сожалению. В общем начало уже положено https://www.youtube.com/watch?v=-AX6GO3KoEI

Сообщение **sinpai** » 30 авг 2016, 18:41

Кирилл, вы, как всегда, на высоте!!! Ждем продолжение. Я думаю, что много интересного я лично почерпну из ваших видеокурсов.
Заставка отличная!

Сообщение **Gudwinn** » 30 авг 2016, 20:37

Ну вот такие мы, раньше чем поспеет, не можем снять урожай))))

Отправлено спустя 13 минут 8 секунд:

sinpai писал(а):Источник цитаты я лично почерпну из ваших видеокурсов.

Я думаю не только Вы, многие смогут удивится как можно эффектно работать, тем, или иным инструментом)))

Сообщение **sinpai** » 31 авг 2016, 02:09

Согласен. Эффектно и самое главное - быстро. Хотя недоработок и косячков еще много. Жалко, что Пабло так до сих пор не решил вопрос с 64-битной версией. Это сняло бы много проблем с переполнением памяти, да и со скоростью обработки. На буржуйских форумах этот вопрос постоянно поднимается. А в ответ тишина...

Сообщение **anonimus** » 31 авг 2016, 02:48

sinpai писал(а):Источник цитаты Жалко, что Пабло так до сих пор не решил вопрос с 64-битной версией

уже всё давно решено и думаю, что бета версия уже скоро выйдет в свет и будет тестироваться долго и нудно :-):

Сообщение **sinpai** » 31 авг 2016, 09:03

Готов принять участие в тестировании.

Сообщение **Gudwinn** » 31 авг 2016, 15:18

sinpai писал(а):Источник цитаты Кирилл, вы, как всегда, на высоте!!!

Спасибо, постараюсь воду не жевать, и не мямлить, всё только по делу)))

Сообщение **stason56** » 01 сен 2016, 21:39

Большое спасибо, вроди б наконец получилось! испанец рулит)) Я взял по его аналогии пошагово сайт сделал, все моменты учел.
Только эти якоря оставляют справа белую полосу на смартфоне. Куда их спрятать можно, подскажите, пожалуйста!

Отправлено спустя 1 минуту 32 секунды:
И еще один вопрос: если этот паралакс делать, то слой плавающий на смартфоне превращается в маленький непонятный мутный фон. Есть какое-то решение?

Сообщение **anonimus** » 01 сен 2016, 21:43

Куда угодно якоря можно деть.
Главное что бы они вертикально были на своих местах, а горизонтально хоть где
Переместить их влево и проблема исчезнет

Отправлено спустя 3 минуты 35 секунд:
Мутный фон? Это у вас видимо не догружает телефон ваш фон или не может отработать его как следунет. Возможно ваши изображения тяжлы. Оптимизируйте ваш сайт.

Сообщение **stason56** » 05 сен 2016, 12:43

Да нет, все прогружается, вот смотри как получается:
вот как выглядет на пк: 320 на пк
вот так в смартфоне: на смартфоне
В ВБ Все сделано таким образом: в ВБ

Получается, что фон сильно растягивает, поэтому в смартфоне просто видно какой-то очень маленький кусочек фона

Сообщение **KoT** » 05 сен 2016, 22:34

stason56, надо сделать несколько картинок по ширине, соответствующей точкам останова (768, 320 и т.д.),но по длине, большей чем слой, на точках останова просто меняй фон слоя на другой, с конкретным размером, и будет счастье!

Сообщение **PanDA** » 20 сен 2016, 23:04

stason56, я раз 30, не меньше просмотрел ролик испанца ))) не получается параллакс. Есть какие-либо требования к соотношению сторон картинки? Что вообще критично для этого эффекта?

Сообщение **anonimus** » 20 сен 2016, 23:30

у вас видимо пиратка скаченная непонятно откуда, где руссификатор сарый, который корявый
там где выбирается параллакс, нужно вручную прописать слово - parallax

Сообщение **PanDA** » 20 сен 2016, 23:58

anonimus, у меня лицензия с 2009 года ;)
но вот в проекте я где-то что-то упускаю... не пойму, как у него на 8.15 получается картинка во весь браузер и параллакс? Мне кажется, размер картинки все же имеет значение

Кто сейчас на конференции

Добро пожаловать на форум!