Сдвиг объектов в адаптивном сайте

Сообщение **maklom** » 17 дек 2018, 13:09

Дорогие форумчане! У меня есть буквально пара вопросов по адаптивному дизайну. Сначала представляю пробный архив проекта, чтобы можно было посмотреть о чём идёт речь:

workshop8_reserve.rar

Схематично страничка построена следующим образом:
1. Создан всего один слой с такими точками: главная ширина 960 пикс. потом идут точки 860, 760, 660, 560, 460 и 320 пикс.
2. Объекты расположены в следующем порядке сверху до низа: меню, слайдер, тексты и картинка в основании.
Столкнулся с такими проблемами при изменении экрана, например ВОВ слайдер уменьшается не только по вертикали, но и по горизонтали. Тогда расстояние до текста также увиличивается, что оптически создаёт некрасивое пустое поле. ВОПРОС - решается ли такая проблема в одном слое или нужно под все элементы создавать отделный слой, чтобы все обьекты сжимались пропорционально???
3. Тестировал страничку в инете на мобиные устройства в каком-то уже не помню (кажется на самсунге) поперчном дисплее страница всё равно зарезается. Какие точки нужно иметь, чтобы все дисплеи подходили при начальной ширине 960 пикс???
4. Есть ли смысл заморачиваться с FlexBox я так понял это сетки при создании адаптивного сайта или достаточно одна работа со слоями??? Если да, то где подробно можно найти описания создания мобильных сайтов на основе сетки билдера???

Сообщение **maklom** » 19 дек 2018, 14:13

Ещё раз всем привет! Хорошо, я понял мои вопросы были слишком трудными для знатоков. :hi_hi_hi:

Упрощаю задачу и ставлю один единственный вопрос при создании адаптивного сайта, достаточно ли обходиться одиними слоями или лучше использовать сетку (решётку) вёрстки??? Если да, то почему, сможет кто-то кратко объяснить? Прошу помогите, нет особо времени бесконечно эксперементировать. Недостаток сетки, как понимаю, не позволяет объекты размещать за границы слоя, к примеру если кнопки нужно визуально вынести за границу поля...

Сообщение **sinpai** » 19 дек 2018, 14:36

Лучше использовать сетки, они адаптивные и много чего позволяют делать.
Погуглите, эта тема разжевана на просторах донельзя. Но лучше поэкспериментируйте, времени много не займет, а опыт появися.
и немного не понятна ваша фраза "объекты размещать за границы слоя, к примеру если кнопки нужно визуально вынести за границу поля".
Что вы имели в виду?

Сообщение **Lemoner** » 19 дек 2018, 22:17

Я полностью перешел на сетки и забыл про кучу геммороя со слоями. Сетки реально отличный способ сделать вообще любой резиновый сайт за короткий срок. Даже вместо всплывающих окон я юзаю сетки (через hide/show). Уровень верстки и скорость выросли в разы.

Сообщение **maklom** » 20 дек 2018, 02:57

Сообщение sinpai » 19 дек 2018, 11:36
...и немного не понятна ваша фраза "объекты размещать за границы слоя, к примеру если кнопки нужно визуально вынести за границу поля".
Что вы имели в виду?..

Большое спасибо, буду изучать сетки. Про эффект кнопок за границой поля: есть белое поле, где размещены все объекты от меню до нижних колонтитулов. Позади поля картинка растянутая на весть экран. А кнопки меню выходят за поле и частично находятся на бэкгрунте... Вот как здесь: http://www.klavierstimmer.com/workshop8/index.php