Ответы пользователя по тегу Адаптивный дизайн
  • Как изменить высоту iframe через @media?

    serjikz
    @serjikz
    web-developer
    А вы не пробовали просто для iframe в css задать ширину и высоту?. Либо можете задать блоку оборачивающему нужные параметры а также position: relative и потом для iframe 100% высота и ширина а также абсолютное позиционирование.
    Ответ написан
    3 комментария
  • Правильный ли подход к адаптивной вёрстке?

    serjikz
    @serjikz
    web-developer
    Ну делать адаптив вам так никто не мешает и тут ничего такого вы особа и не описали. Есть 2 способа верстать адаптивно - сначала мобильную версию и из неё переходить в десктоп, либо обратно. Только так.

    На счет того, как организовать процесс - изучите БЭМ для этого дела. С ним хорошо верстать. Если ещё пользоваться препроцессорами какими-то - шикарно, а ещё если и сборщиками - вообще идеально (ну less/sass/postcss можно по-разному компилить вплоть до плагинов в редакторе).

    Как делаю я:
    1. Клепаю html полностью, естественно именую классы по БЭМ (можно посекционно делать - сделал секцию шапки, запилил стили, сделал секцию подвала и опять же запилил стили, кому как удобно)
    2. Создаю на каждый (ну или почти на каждый) БЭМ-блок свой .less файл.
    3. В каждом файле верстаю сначала моб версию, потом в нём же чуть по-ниже пишу нужные media
    4. Конечно же сборщиком всё собираю в 1 css файл и всё (сборщик работает, конечно, постоянно, чтоб компилировать из less в css ну и минимизировать сразу и автопрефиксить).

    Этап 3 можно делать подругому, к примеру делать отдельно media.block.less под каждый блок и всё это загонять в самый низ сжатого css, либо весь media делать в отдельном файле просто, всё зависит от того, на сколько много вам нужно писать media (у меня бывают простые проекты, где media нужно буквально 2-3 штуки в 50-70 строк кода максимум, для этого не вижу смысла всё в отдельные файлы блоков писать, пихаю просто всё в один).

    P.S. Конечно же отдельные файлы less для миксинов и переменных ну и основных стилей страницы.

    P.P.S Если вы не знаете препроцессоров - можно всё тоже самое делать и в обычном css, всё равно будет удобно. Раньше я считал дикостью такой подход. Сейчас без него жить не могу.
    Ответ написан
    8 комментариев
  • Какие есть учебные материалы по адаптивному дизайну на русском?

    serjikz
    @serjikz
    web-developer
    Графика:
    1. max-width: 100%; у img
    2. svg где это возможно и по башке дизайнеру если он делает иконки растром
    3. Опционально от вменяемости дизайнера - кадрирование картинок ну и знаменитый тег пикчер с его супер-способностями почти @media (это для ретины и для адаптива сразу у картинок) https://habrahabr.ru/post/237991/ тут про суперспособности

    Всякое:
    1. требовать промежуточные макеты хоть какие-то (моб, планшет, десктоп, большой десктоп если там резина сайт)
    2. бить об стол дизайнера и/или заказчика если он хочет крутой адаптив а дизайна других версий нет и не будет (пошли все куда по дальше, адаптива тогда тоже не будет или платите в 3 раза больше за то чтоб делал верстальщик адаптивный макет в .psd)
    3. Mobile first @media запросы изучать
    4. Опционально и на любителя - юзать бутстрап или ковыряться че там да как
    5. Опционально и на продвинутого - flexbox

    Инфы слишком много чтоб это всё описывать тут, поэтому вперед на каналы: open-education.net/services/spisok-youtube-kanalov... где-то из них 100% найдете то что надо. К примеру у "Серёги" (по началу видео поймете кто это) хороший курс про flexbox а у loftblog масса разной инфы про svg, графику и тп.
    Ответ написан
  • Как стать верстальщиком в краткие сроки?

    serjikz
    @serjikz
    web-developer
    sorax канал. Где-то давно был пост с каналами для фронтендеров, уже забыл и искать влом. Через гошу найди "ютуб каналы для front-end". В короткие сроки вряд ли реально. Все тонкости только с практикой, а какие-то с глубокой практикой.
    На счет бутстрапа - я забыл, когда им пользовался (обычно пишу чистый css даже без препроцессоров, но иногда с ними явно удобней)
    На счет сборок - тоже редко, так как они больше для больших проектов (сорь за каламбур)
    На счет адаптивной вёрстки - это тоже только практика. Сначала надо научиться верстать статичные шаблоны, а потом делать адаптив. На самом деле в media нет ничего сложного и страшного, просто мы будто бы выкидываем предыдущий файл стилей для прошлого экрана и заменяем его новым файлом стилей. Грубо говоря так, но там надо основательно всего учитывать, особенно наследование и перезапись правил.
    Ну и на счет боевого проекта - готовь фотошоп, который нужно тоже так нормально знать, потому что плох тот верстальщик, который его не знает ровно как и плох тот дизайнер, который не представляет вёрстки. Идеальный вариант - уметь верстать и уметь рисовать дизайны сайтов ну и обрабатывать фотки, потому что это всё очень понадобится (всё больше встречаю криворуких дизайнеров, а о криворуких верстальщиках лучше вообще молчать).

    Главное - при написании кода думайте о тех, кто будет его поддерживать, но если вы занимались бекендом - наверняка это и так знаете.
    Ответ написан
    Комментировать
  • Что собой представляет верстальщик и какая его перспектива?

    serjikz
    @serjikz
    web-developer
    Немного повествую свою историю. 21 год, женат, работаю в сфере web уже лет 6 точно. Начинал с php, сейчас отлично знаю всё вышеперечисленное вами + php + photoshop + js(его далеко не идеально). Работаю дома, хватает на семью, на хотелки, на открытие собственного дела(чисто вебом заниматься наскучило). На счет перспектив - я думаю скоро большая часть приложений будет писаться с использованием web-технологий и только. Сидеть просто верстальщиком не советую. Заработок может и будет нормальным и более менее постоянным, но станет в какой-то момент скучно.
    Ответ написан
    Комментировать
  • Как реализовать подобное средствами CSS?

    serjikz
    @serjikz
    web-developer
    До того, как узнал об svg делал следующим образом - создавал a и в него вкладывал кучу div нужных размеров и разных форм, затем позиционировал их. Но у меня это была не особа большая проблема, за 15 минут управился, а тут реально лучше svg.
    Ответ написан
    Комментировать