Каков наилучший подход к добавлению реагирующих медиа-запросов на сайт? ... в каком порядке и методе? Некоторые люди говорят, что сначала мобильный телефон - это способ пойти, но мне интересно, может ли следующее легче настроить целевой размер экрана (заполненный всеми элементами страницы, позже некоторые будут скрыты на небольших экранах, таких как сухарики ссылки), чтобы определить «все» стили CSS, макет, типографию и т. д. для страницы, чтобы каждый элемент получал свой стиль по умолчанию. Тогда другие запросы будут определять только изменения, влияющие на каждый вариант меньшего размера. Таким образом, блок «all» будет самым большим, а затем все другие медиа-запросы будут просто трюками, применяемыми для переопределения стилей по умолчанию.Рекомендации по построению медиа-запросов
@media all { /* including all styles for all elements */ }
@media (min-width: 1200px) { /* only add styles that differ from "all" and target this size changes */ }
@media (min-width: 992px) and (max-width: 1199px) { /* only add styles that differ from "all" and target this size changes */ }
@media (min-width: 768px) and (max-width: 991px) { /* only add styles that differ from "all" and target this size changes */ }
@media (max-width: 767px) { /* only add styles that differ from "all" and target this size changes */ }
@media (max-width: 480px) { /* only add styles that differ from "all" and target this size changes */ }