Изучил html,css,jquery,php,mysql, делал свой проект. Решил пойти на front-end. Пригласила веб-студия. И я целый день там зря сайт делал. Поставили задачу - с нуля сверстать главную страницу. Оказалось, что надо было делать его адаптивно. А я просто сделал, что width 1024px и дальше скрывается. И я не понял, как адаптивно надо было делать сайт по макету. Там было два header. Он мне типа говорит, здесь надо было иконки убирать и текст оставлять. Здесь типа квадратик с тремя полосками делать, и это надо делать, когда один из хедеров уже не помещается. А вот здесь типа по два блока картинок при уменьшении. Там было четыре кружочка для слайдера. А я такой спросил, а сколько кружочков надо было делать, там же могло быть и 30 картинок. Он такой - это, наверное, в логике делается (типа в битриксе). Вот реально, я так и не понял, сколько этих кружочков под слайдером надо было делать. Надо было ещё с фотошопом ознакомиться. Там он говорит - типа здесь должно было быть всплывающее меню. Это типа надо было в слоях в фотошопе копошиться - он сам, кстати, не нашёл. Я так и понял, как делать адаптивно сайт. Это мне должны были разъяснять? Или это интуитивно нужно было понимать? И мне нужно ещё фотошоп изучить? Ещё непонятно, вот телефоны бывают по 1920px, так там бы вообще всё мелко получилось бы, или для телефонов как-то отдельно прописывается? К сожалению, пришлось уйти, не смог справиться с работой.
Это нормально.
У дизайнера скрытые нужные слои помечены другим цветом. Если это не так и в макете оставлено много лишнего мусора - можно нашуметь на дизайнера. Но в общем случае полученный макет это уже наши проблемы.
А вот здесь типа по два блока картинок при уменьшении. Там было четыре кружочка для слайдера. А я такой спросил, а сколько кружочков надо было делать, там же могло быть и 30 картинок.
Я не поняла, Вы кружочки у слайдера ручками верстали чтоль? Вроде пишете, что JQ изучили. Кружочки генерируются слайдером сами. И получается их количество картинок разделенное на количество картинок в слайде. При разном размере окна может быть разное количество.
Статей о том, как делать адаптивную верстку пруд пруди в гугле.
Если по началу тяжело просите макеты, где дизайнер нарисовал макеты для 3-4 разных размеров вьюпортов.
Откройте несколько современных сайтов и плавно поизменяйте размеры окна (либо через инструменты разработчика), посмотрите как они перестраиваются.
Ankhena W: я смотрел видео по бутстрап карусель, там надо было ручками вводить кружочки. Да, наверное, надо было посмотреть jquery-плагины для слайдеров.
Programmir: Еще раз медленно: откройте ссылку из моего сообщения на своем крутом смартфоне. Потом погуглите что такое вьюпорт. Ну или в обратном порядке.
Вот реально, я так и не понял, сколько этих кружочков под слайдером надо было делать
речь о том, что Ваша верстка не должна сыпаться при разных кол-вах. Ваш шаблон должен предусматривать такие вещи. Ведь Вашу верстку потом надо будет где-то использовать.
Это типа надо было в слоях в фотошопе копошиться
Да, так обычно это и происходит. Как иначе модалки отрисовать и дропдауны, если не на скрытых слоях.
Я так и понял, как делать адаптивно сайт.
То что Вы сделали, должно адекватно смотреться на всех девайсах с разными размерами экранов. Если дадите линк на свое творение, скажем где конкретно проблемы.
И мне нужно ещё фотошоп изучить
Обязательно, не на уровне мастер, но как со слоями работать нужно знать, можно изучить за 15 минут.
есть мониторы большие с 1920px, а есть смартфоны с меленькими экранами с таким разрешением - как в этом случае учесть? прописывать отдельный медизапрос для мобильных устройств?
Programmir: ознакомьтесь с каким-нибудь фреймворком типа Bootstrap, большинство вопросов отпадет.
Ну или сами в браузере попробуйте окно поуменьшать на адаптивных сайтах и наблюдайте за поведением блоков. Медиазапросов обычно ограниченное количество, на специально определенных заранее брейкпоинтах. (Иногда их определяет сам верстальщик, иногда прописано в ТЗ или существуют какие-то правила в студии).
есть мониторы большие с 1920px, а есть смартфоны с меленькими экранами с таким разрешением - как в этом случае учесть? прописывать отдельный медизапрос для мобильных устройств?
когда я пробовался на фирму , мне дали макет с готовым ТЗ , почти все было описано , раз вы попали в такую шарашку там где на вас наплевать (а судя по всему не только на вас) , то стоит поискать что то другое.
тут визуально можно поиграть с работой bootstrap.
Чаще всего макет делают по сетке, считаете колонки и помещаете контент по макету.
Если все правильно сделать, то будут элементы адаптивны.
Простой
Средний
