1. Их может нарисовать дизайнер.
2. Их можно взять из любого фреймворка или статистики.
3. Можно (и хорошо бы) добавлять там, где ломается конкретный дизайн.
чтобы упростить написание стилей?
Так не выйдет, каждый дизайн разный (ну если работать с хорошими и разными дизайнерами, а не под копирку), также браузер может быть открыт на произвольную ширину, особенно на больших мониторах.
И нет смысла, например, ждать увеличения до 768, когда уже на 600 можно показать следующую версию, если конкретный дизайн это позволяет.
Но
можно упростить и сократить за счет относительных единиц измерения, calc, функций clamp, min, max, а также родных свойств флексов и гридов.
Также поможет использование препроцессорных переменных. Делаете как-то так (значения от балды на основе какого-то из проектов):
$elg: 1526px;
$lg: 1000px;
$md: 720px;
$sm: 540px;
$esm: 360px;
Количество может меняться в зависимости от проекта.
И используете в media.
@mixin sm {
@media (min-width: variables.$sm) {
@content;
}
}
@include sm {
//some
}
При переходе в новый проект, смотрите макет и меняете переменные.
Простой
Простой