Создание интернет-магазина #23 Финал. Адаптивная верстка сайта.

Автор Ivan Samoilov
Создание интернет-магазина #23 Финал. Адаптивная верстка сайта.

друзья.

Всем привет. С вами канал frontcoder. Меня зовут.

Анатолий Я сегодня у нас с вами заключительная видео по верстке сайта китчен.

Тайм в котором я расскажу вам о каких-либо документов которые встретились мне при его адаптация как помните в предыдущем видео уроки я показал адаптацию в главной странице, а остальную счастье одела мне на видео потому, что там очень много таких моментов. Ну и я просто вкратце расскажу, что именно вызвало сложности и как в собственном произошла адаптация слайдера. Как вы видите здесь другие изображения поменять. Потому, что те изображения которые были в макете они были рассчитаны на. Вот — это разрушение чтобы они не растягивались просто поставили пока другие картинки и так друзья. Давайте приступим с главной страницы мы собственно тут уже всё видели единственное, что у нас здесь добавилась — это меню меню нас вот такого плана получилось иконок вот этих блоков у меня не было поэтому здесь не указали и просто каталог Toyota сложное меню которое надо 100 Piano полностью скрывается и здесь у нас остаётся вот такое меню поэтому я думаю никаких у вас вопросов и сложности нет адаптация папапам тут опять же ничего сложного. То есть как увидеть у нас здесь вот такие рисунки на десктопах на мобильных устройствах они просто срывается и. Остаётся только пап ну собственно — это то, что не было показано на предыдущем и теперь давайте посмотрим остальные страница у меня есть список все страницы. Я предлагаю понимаю просто пройдемся и посмотрим адаптация по 404. Как появились здесь просто вот этот задний фон. Она собирается, а всё остальное просто сжимается. То есть тут опять же ничего сложного нет я думаю никаких проблем с данной странице вас бы не возникло далее. У нас идёт корзина с корзиной смотрите на десктопе она у нас выглядит вот таким вот образом то есть у нас здесь вот такой блок идет справа данные для заказа и. Пустота на адаптации, что мы делаем на 1200 то есть менее 1200 и вот этот блок с данным заказом переключалка опускаем вниз, а всё остальное пока у нас здесь ничего не скрывается всё остаётся так как есть уменьшаем дальше на блоки. Как вы видите наши таблица уже полностью изменилась у нас ещё заголовок нашей таблицы то есть мы его полностью вскрываем и так давайте посмотрим. У нас вот в этой ты даёшь кем здесь есть Def я добавил для мобильной версии то есть смотрите мы уменьшаем вот эти элементы. Они полностью скрываются вот как вы видите меньше 960 они уходят Display None. А вот этот блок. Мобайл он наоборот появляется он в себя возможность переключения количество элементов и цену дали к всему остальному тут никаких. Я думаю сложность нет мы просто его уменьшаем до беда для мобильного устройства шапку. Мы также здесь так на 322 смотреть до шапку мой также здесь просто добавили еще чтобы она прижималась к верху с корзиной. Я думаю. Понятно Опять же никаких дополнительных сложностей не должно было бы возникнуть далее. У нас блока идёт корзина пустая. Давайте посмотрим здесь просто вот такой вот вид наш каталог с каталогом тут у нас опять же на самом деле в принципе ничего сложного нет интересно. Был бы я думаю фильтр и. Давайте я покажу как он реализован изначально мы просто перекидываем одно то другое. То есть вот как увидеть он становится таким большим. Долина меньше 900, что мы делаем здесь он у нас также ещё сжимается без каких-либо сложностей у нас немного перестраивается элемента то есть его подарить или в тот подвал в остальном. Никаких изменений. У нас тут нет ну с этим поэтому я думаю никаких сложно опять же не должно было возникнуть дальше. Вот на блоке меньше 768 он у нас фильтр перестраивается. Вот в такой вот аккордеон и нажимаем на нужный нам элемент и он у нас разворачивается далее внизу нас скрыт один из вариантов вида. То есть у нас. Остаётся только вот такой вариант II вариант линию дальше, что ещё хотелось бы тут сказать в принципе тут просто дальше. Всё продолжать просто сужаться никаких дополнительных сложно в каких-то элементов нет поэтому я думаю тут опять же вас никаких сложностей бы не возникло следующей странице — это каталог категории страница очень просто я тут я думаю даже. Останавливаться не имеет смысла. То есть у нас просто всё сперва отображается по два элемента потом по одному. Как выглядит здесь никаких сложностей нет у нас просто происходит перекидка одного элемента подругой дали вот блок сравнения товаров у нас довольно-таки интересная система у нас происходит. Вот такая прокрутка при этом левая часть у нас остаются фиксированными. Ну смотрите тут у нас опять же в принципе мы просто отображаемым разное количество элементов справа и на самых маленьких элементах у нас просто происходит вот такой переключения ты собственно всё сравнение тут с опять же никаких каких-либо дополнительных сложностей не был блок подтверждение заказа здесь у нас просто таблица которая просто сужается при уменьшении экрана и немного уменьшается в размерах текст, но как бы увидеть опять же ничего сложного здесь нет заказ подтвержден нас есть всё тоже самое только добавляется. Вот немного ещё просто пару блоков сверху они вот так вот перестраиваются то есть как увидеть ничего что-либо сложного или координально отличающегося от того, что делали на главной странице здесь не происходят вот этот блок у нас здесь карта спускается просто вниз нитка здесь просто полностью убираем и. Остаются только сами контакта без карта мой взгляд на мобиль.

0 комментариев
0

Читайте также