#3 Учу frontend. Неделя 4. Подгонка под мобильные устройства
Неделя выдалась спокойной, по плану занятий нужно было перепроверить задеплоеную верстку у 4 студентов, изучить медиа запросы и сделать респонсив под мобильные устройства.
Через медиа запросы, оказывается, можно не только подогнать макет к разным размерам экранов и ориентации. Но еще, например, настроить разные размеры для кликабельных областей в зависимости от указателя. Или убрать ховер эффекты, там где в принципе нет ховера.
Из того, что я еще представляю как можно использовать: это тип print, для настройки печатного вида. И настройки prefers-color-scheme. Остальное пока не представляю в каких ситуациях можно применить на практике.
С подгонкой под мобильные справилась довольно быстро.
В свободное время:
-поковырялась с svg для иконок. Сделала свой первый спрайт через symbol. Html после этого сдал выглядеть получше) Долго не могла понять, почему не применяется currentColor, потом только вычитала что информация кэшируется.
-почитала про относительные единицы измерения, применила rem к шрифтам в макете. На макете крайним размером под мобильные было 380, так что я до 320 решила попробовать сделать шрифты "флюидными" через calc(). Формулу брала здесь https://css-tricks.com/snippets/css/fluid-typography/ , сайт вообще кладезь всякого интересного. До конца не разобралась почему в одних случаях calc нормально принимает разные значения типа vw и px, в других нет, ну и как работает миксин из примера тоже не поняла. Но задуманное сделала. Надо теперь к остальные делали с макета тоже местами сделать относительными, а то смотрится не пропорционально.
-пообщалась с другими студентами, кому-то немного помогла. Чужой код - интересно и не сразу понятно, но когда получается найти в нем проблемное место - это прям буст к настроению. Попадаются хорошие решения, например, очень понравилось как выглядела работа sass с неймингом по БЭМ. На досуге тоже надо будет посмотреть.
-добила часть оставшихся тестов.
Результат работы тык
На этой неделе будет работа c функционалом.
Статистика:
времени на обучение потрачено: 31 час
место в рейте: 293
