CSS -стили, располагающиеся ниже в каскадной таблице стилей, имеют больший
приоритет по сравнению с эквивалентными стилями, находяшимися выше (если
только более высоко расположенные стили не окажутся более подходящими). Сле-довательно, в начале таблицы стилей мы можем задать базовые стили, применимые
ко всем версиям нашего дизайна, а затем переопределить соответствующие разде-лы с помощью медиазапросов далее в документе. Например, можно задать навига-ционные ссылки как простые текстовые ссылки для версии дизайна, предназна -ченной для больших областей просмотра (где более высока вероятность того, что
пользователи задействуют мышь), а затем медиазапросами заменить соответству-ющие стили, чтобы обеспечить более крупную целевую область (для нажатий паль-цами) для более ограниченных по размеру областей просмотра.
Наилучший способ загрузки медиазапросов
для адаптивных веб-дизайнов
Несмотря на то что современные браузеры достаточно умны для того, чтобы иг-норировать не предназначенные для них целевые файлы медиазапросов, иногда
это не мешает им загружать подобные файлы. Таким образом, размещение разных
стилей, связанных с медиазапросами, в отдельных файлах имеет лишь небольшие
преимущества (не считая личных предпочтений и/или разделения кода на блоки).
Использование отдельных файлов влечет рост количества HTTP-запросов, необ- HTTP -запросов, необ- -запросов, необ-ходимых для обработки страницы, что, в свою очередь, приводит к ее более мед-ленной загрузке.
JavaScript -инструмент Respond.js ( https://github.com/scottjehl/Respond), позволя -ющий наиболее быстро добавить частичную поддержку медиазапросов в Internet
Explorer версии 8 и ниже, на текущий момент не способен проанализировать CSS -код, на который ссылается команда @import . Поэтому я рекомендую добавлять
2.3. Наш первый адаптивный веб-дизайн 59
стили, связанные с медиазапросами, в уже имеющуюся таблицу стилей. Например,
вы можете просто добавить медиазапрос в существующую таблицу стилей, исполь-зуя следующий синтаксис:
@media screen and (max-width: 768px) { ваши стили }
|