Скелетная структура Медиа-запросы - что они означают?

Question

Я учусь, как использовать основные Skeleton Framework для адаптивного веб-дизайна, и они имеют следующие медиазапросы:

/* Mobile first queries */ 

/* Larger than mobile */ 
@media (min-width: 400px) {} 

/* Larger than phablet */ 
@media (min-width: 550px) {} 

/* Larger than tablet */ 
@media (min-width: 750px) {} 

/* Larger than desktop */ 
@media (min-width: 1000px) {} 

/* Larger than Desktop HD */ 
@media (min-width: 1200px) {} 

Другие медиа-запросы, которые я видел использовать max-width декларацию, но скелета, кажется, наоборот.

Я не понимаю, почему вместо max-width используется min-width.

Любое объяснение поможет мне получить мою голову вокруг min-width вместо max-width.

Answer 1

Используя min-width, любой CSS, который вы пишете вне медиа-запросов, будет «базовым» и будет применяться ко всему, что составляет до 400 пикселей в ширину; в основном создавая ваши мобильные стили, которые обычно являются простейшими стилями, «базовыми» стилями.

Таким образом, вы добавляете определенный CSS поверх этого, поднимаясь по ширине.

Альтернативный подход, с помощью max-width, делает ваши стили вашего рабочего стола, которые обычно более сложны, стили по умолчанию, а затем вам нужно «удалить сложность» из стилей рабочего стола, чем меньше размер экрана.

Думайте об этом так:

С min-width вы строите ваши стили постепенно, от самых простых мобильных стилей, пока вы не достигнете размера рабочего стола, более сложным, стили

С max-width вы «разлагаетесь» ваш стили постепенно, начиная с сложных стилей рабочего стола, до тех пор, пока вы не достигнете простых мобильных стилей.