я советую юзать mobile-first подход, выбрать три-четыре ключевых расширения (как в бутстапе например) и работать с этим. Например:

.element{
width: 100%;
}
@media (min-width: 780px) {
.element{
width: 50%;
}
}
@media (min-width: 1200px) {
.element{
width: 33.333%;
}
}

таким образом компонент будет шириной 100% на телефонах, 50% на планшетах и 33% на компутерах. К томуже при таком подходе у тебя не будет проблемы мозайки, когда при любом изменении экрана что-то куда-то перемещается.

Кроме этого, вместо медиа квери можно юзать класс. Для этого надо при помощи js слушать изменения размера экрана, и менять класс у body. Такой подход добавляет немного гибкости для js, поскольку тут немного проще узнать что за размер экрана у пользователя.

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.