Разработка моего сайта. Часть 5. Адаптация меню для планшетов.

Автор Alla Bessonova
Разработка моего сайта. Часть 5. Адаптация меню для планшетов.

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

На чём мы остановились. А так так мы поставили таким образом наше меню мы сейчас будем с ним дальше работать, что мы будем дальше делать. Нам пока, что на этом этапе требуется сейчас мы так робот исчез мы закрываем продолжаем работать с меню мы с ним работали ещё только немного нам нужно дать вот здесь вот расстояние как в макете посмотрим сколько — это пикселей главный до названия 247 пикселей так 248 пикселей нам надо дать права.

Да у нас сейчас макет именно для десктопной версии мобильной.

Может будем делать по ходу походу походу работу так 247 247 да pixelate сейчас мы будем отодвигать меню 247. Да так, что нам нужно. Что можно посмотреть в отладчике название класса которые требуют отодвинуть так класс меню называется класс меню на ещё нам нужно его отодвинуть очень интересным образом для того чтобы так нам его нужно отодвинуть таким образом чтобы когда мы сжимаем потом экран когда мы захотим потом изменять ширину чтобы нас наше меню именно всегда всегда оставалась поле видимости пока мы не достигли определённого размера экрана на котором можно будем видоизменять менюшка. Но об этом чуть позже так нам нужна нужна так магазин. Райт меню меню зайди вообще-то сначала селектор меню так так так так не хочется давать сюда margin-left потому, что он жестко зафиксирует и потом не даст уходить так мне контейнер, а то у нас вообще Flex Display Flex так так так если мы дадим Display Flex если мы дадим вот этому контейнеру леганес сельта центр так нет нет решения justify-content-center justify-content-center о том, что нужно в принципе этот результат нас устроит поместим по центру и при изменении старинные наш наше меню всегда будет по центру на самом деле не всегда мы сможем придерживаться встретиться тут такой вопрос, что не всегда можно придерживаться именно вот дизайна нарисованного потому, что нарисовано дизайн он не даёт нам вот — это вот — это вот интерактивности у нас нету на один экран зафиксирован и от него мы не работаем. Но конечно. Вот например меньшему и на такой версию уже мне вот ведет себя очень хорошо то есть и она видно. Всё приятно сейчас уже будем заниматься порядок тебя много иконку потому, что она вышла у нас — это кажется маленькая хотя бы лизал ей. Ровно, но — это ладно чуть-чуть побольше она выходит чем текст. Анет Всё верно. Так ну вот меню у нас уже стало. А ты здесь почему-то больше света чем меню justify-content-center. Кстати надо дать то его корпуса в отладчике. А в коде не написал на один контейнер. Так этот мы даже ещё не создали ладно создадим новый Selector так рано ещё нас копируем нет justify-content-center контрл с смотрим на наш результат всё должно остаться также потому, что мы сейчас — это дописали вход. Хочется конечно ещё чтобы. Проверь меня была немного смотрим по контенту. Ну по сути можно дать. Конечно сюда меню margin-left 10 50. Если уж прям прям как надо прям как надо hypixel конечно всё при адаптивной верстке. Всё конечно нужно давать конечно стараться в процентах. Потому, что при записи экрана у нас кстати вот конкретный Pixel они будут нам давать задавать проблема так смотрим нет нам — это Pixel Z большая проблема может она смене потом получается не очень красивая. Надеюсь дадим контакты limak limra. Этот один. Тогда класса меню погода по центру стола 35 пикселей matlab. А классу меню. Вадим Ладно. Лофт 35 35 пикселей смотрим результат на нас чуть мне подвернулась и нам надо чтоб добиться того чтобы на 960 пикселей у нас всё выглядело 900 так сейчас посмотрим посмотрим Smart Grid less 992 у нас будет. при которой мы будем уже переходить на планшет на версию вот у нас меню в принципе выглядит очень хорошо на версии вот на такой изменяю смотрим. До конца. Вот она находится. Отлично Так обновим всё посмотрим, что всё переменилось да. Что теперь тебе нужно наверное подобрать корзиночку сюда для того чтобы меня уже в версии для планшетов нужно видели здесь не полное меню, а только только меню гамбургер так. Ну, тогда в следующем видео я буду уже заниматься созданием меню гамбургеры адаптировать этот сайт дальше увидимся в следующем видео.

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

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