Брейкпоинты

Мы все в курсе, что есть большие экраны и есть маленькие экраны. Но среди нас есть люди (часто они еще и разработчики), которые думают, что на экранах шириной 1024 и больше надо показывать маленькие картинки:

А на экранах меньше 1024 — хорошие, большие картинки:

А все потому, что у ребят есть какие-то там условные брейкпоинты, под которые загоняется вся верстка.

Скриншот с курса по фронтенду, на который я не успел, к сожалению, попасть

Как на самом деле надо делать брейкпоинты:

  1. Берете окно с начальным состоянием страницы, при котором вас все устраивает.
  2. Сжимаете, если начали с десктопной версии. Растягиваете, если начали с мобильной.
  3. Как только при сжатии или растягивании вам стало плохо от вида сайта, записываете ширину в брейкпоинт.
  4. Подверстываете под этот брейкпоинт, чтобы стало красиво.
  5. Сжимаете или растягиваете дальше до плохого вида.

С таким подходом брейкпоинты и их количество будут связаны с вашим сайтом, а не какими-то устройствами и их размерами.

Like what you read? Give михаил капанага a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.