Как организовать mobile first?

Question

[campus1]

Здравствуйте!

Как лучше реальзовать принцип mobile-first?
На моем понимании это выглядит +- так:
создаю файл style.scss (так как его использую) и например для header'a делаю вот так

.header{
 @media (max-width: 551px) {
    ...
    }
 @media (max-width: 991px) {
    ...
    }
    @media (max-width: 1200px) {
    ...
    }
}

И так себе от малого до большого. Я правильно понимаю принцип или есть другие варианты (создавать другие папки и там прописывать и т.д)??

Comments

[Сергей delphinpro]

min-width а не max-width/
Сначала стили для мобайла, потом перезапись их стилями для десктопа.

[campus1]

Сергей: Ага понял

[campus1]

Сергей: А на сколько сейчас приемлем этот принцип? Стоит ли его поддерживать (придерживатся)?

[Сергей delphinpro]

campus1: настолько, насколько он будет удобен лично вам и в данном проекте.

[campus1]

Сергей: Спасибо за ответ!

Answer 1

[Danila]

.header {
	/* начинаем со стилей для мобильных, на то он и mobile-first */
	
	@media (min-width: 760px) {
		/* стили для планшета */
	}
	
	@media (min-width: 1024px) {
		/* стили для десктопа */
	}
	
		
	@media (min-width: 1200px) {
		/* и дальше, если нужно */
	}
}