Правильный подход для CSS Media Query

Question

Этот вопрос НЕ о том, что такое CSS Media Queries, а о том, как правильно его использовать.

Поэтому я планирую создать несколько плавных страниц, которые будут иметь небольшие различия в пользовательском интерфейсе при просмотре на рабочем столе /планшет / мобильный

Итак, мои вопросы:

1. Для 1 страницы я должен создать отдельные CSS-файлы для рабочего стола / мобильного / планшета, а затем вызвать их, используя

link href="desktop.css" media="..."
link href="ipad.css" media="..."

ИЛИ использовать один / общий CSS и иметь медиа-запросы внутри них, такие как

Common.css

@ media.... // стили рабочего стола

@ media .... // стили ipad

Я имею в виду, что отдельный CSS создаст некоторую задержку при выполнении нескольких запросов http.как даже для настольных компьютеров, при меньших / сжатых размерах браузера, я могу переключиться на мобильный CSS. Так будет ли отдельный CSS создавать некоторую задержку?

1. Есть ли какой-либо порядок, которому нужно следовать при определении медиазапросовчто поможет с точки зрения будущей совместимости, например, скажем,сейчас я просто хочу поддерживать десктоп и iPad ... Но в будущем я хочу также поддерживать iPhone ... Так каким должен быть правильный способ / порядок объявления медиазапросов?

Просто добавлю, я еще не на 100% решил, использовать ли ширину ИЛИ device-width, но вы можете предположить любой из них (наиболее вероятно это будет device-width) и предоставитьВаши предложения ..

Спасибо.

Answer 1

1. Используйте один файл, потому что его один запрос и потому что он может быть более эффективно упакован.
2. Порядок медиазапросов не имеет значения, ЕСЛИ они не пересекаются.( Они могут работать так же, как обычный css - то есть, если у вас есть медиа-запрос для (min-width: 320px) и для (min-width: 480px) - и ваш экран имеет разрешение 1920px - тогда оба запроса будут обработаны ).

Если вы хотите узнать о них больше: вот Хорошие , Плохие и Уродливые стороны.