TGViewer
Programmer Way | AI Programmer Way | AI @programmerwayit · 1.78K subscribers
Post #490 5.28K
​​Funiro.
Сверстал нереально крутой интернет магазин с работающей корзиной и подгрузкой товара из json. Верстка вышла на совершенно другой уровень: повсеместное использование grid, нестандартные блоки, сложные слайдеры с параллакс эффектом, крутые решения, а самое главное — адаптив

Когда нам нужно сделать адаптив блока, то мы действуем по такой схеме: уменьшаем шрифт, отступы, пока верстка выглядит нормально, если контент уже не влезает — изменяем блоки(делаем в колонку или уменьшаем размер). Если с перестановкой блоков все понятно, и от этого нельзя избавится, то с отступами и размером шрифта все немного иначе. Часто мы вынуждены на каждом бреикпоинте уменьшать отступы блоков, подбирать подходящий размер шрифта, который будет смотреться, если вы хоть раз верстали макеты, то думаю вам это знакомо

Решением будет простой миксин, который принимает css свойство, значение при максимальном контейнере и минимальное значение, которое будет на 320px, а также тип(по умолчанию 1, и 0, если надо чтобы свойство пропорционально изменялось на любых расширениях, а также 2, если только для расширений больших чем контейнер), подробнее можно посмотреть на курсе или в видео про отзывчивое свойство

К посту прикреплю результат и GitHub репозиторий с кодом:
More from @programmerwayit
  1. Aug 15, 2026Всем привет! 👋 После достаточно долгого перерыва пришла идея возродить этот канал, с моме…
  2. Aug 31, 2022​​ScrollReveal. Библиотека для создания анимации при скролле. Если нужно быстро добавить п…
  3. Aug 24, 2022​​Переезд в Бельгию. Всем привет, мир меняется, и если вчера можно было говорить, что така…
  4. Jul 26, 2022​​Sinauw. Всем привет! Давно не выходили посты, постараюсь исправиться, думаю нас ждет еще…
  5. Jun 24, 2022​​LocalStorage и sessionStorage. Хранилища текстовой информации в браузере. LocalStorage м…
  6. Jun 19, 2022​​Chart.js. Chart.js — это большая библиотека для создания графиков, гистограмм, радарных…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →