И тут к вам приходит дизайнер и говорит, что ему не очень нравится как выглядит карточка в размерах от 750 до 768px. Давайте добавим новый брейкпоинт и все пофиксим!
.card {
// Стили для мобилы
padding: 8px;
@media (min-width: 750px) {
// Стили, чтобы все исправить
padding: 12px;
}
@media (min-width: 768px) {
// Стили для планшета
padding: 16px;
}
@media (min-width: 1024px) {
// Стили для десктопа
padding: 32px;
}
}
Хорошо 👍 Запрещайте дизайнерам добавлять новые локальные брейкпоинты! Если вы так будете делать, то скоро ваше приложение с разными брейкпоинтами будет невозможно контролировать в адаптиве.
Добавлять новые брейкпоинты нужно только ГЛОБАЛЬНО! Чтобы их использовали все компоненты приложения. Ну и очевидно каждый новый брейкпоинт должен быть обоснован.
Хорошо 👍
.card {
// Стили для мобилы
padding: 8px;
@media (min-width: 63.9625em) {
// Стили для планшета
padding: 16px;
}
@media (min-width: 63.9625em) {
// Стили для десктопа
padding: 32px;
}
}