Медиа-запросы: избежать наследования?

Question

Добрый вечер,

У меня есть веб-сайт с текущей версией CSS, оптимизированной для работы с компьютером. Я работаю на Iphone CSS, используя IwebKit5, чтобы обеспечить лучшее взаимодействие с пользователем на ходу.

Я использовал javascript, анализируя пользовательский агент, чтобы определить, какой CSS использовать. Я искал способ избежать использования javascript и обнаружил функцию медиа-запросов.

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
<!--<![endif]-->
<link type="text/css" rel="stylesheet" href="desktop.css"/>

Это то, что я пытался, он хорошо работает на рабочем столе (iphone css игнорируется), но на Iphone я понял, что загружены и mobile.css, и desktop.css, поэтому я пытаюсь найти способ избежать этого , Что можно добавить, чтобы избежать такого поведения?

Спасибо!

Answer 1

Я полагаю, что вы подходите к этому неправильно.

Включите desktop.css first , и пусть это будет включено безоговорочно.

Затем внутри mobile.css добавьте / переопределите любые свойства, которые вам нужны.

Подавляющее большинство desktop.css по-прежнему должно быть актуально для iPhone - вам просто нужно отрегулировать размеры / длину и другие мелкие изменения различных элементов внутри mobile.css.