Загрузите разные CSS для разных медиа-ширины

Question

Я делаю сайт, дизайн отзывчив. Но для меню я выбираю простую кнопку переключения, где меню будет находиться при загрузке на мобильное устройство. Когда кнопка будет нажата, меню появится с простым <ul><li> рендерингом маркированного списка. Но дело в том, что для сайта я сделал сложный CSS для меню; когда я загружаю сайт в мобильное устройство, что мне делать?

• Нужно ли сбросить все свойства CSS, сделанные в меню CSS, а затем сделать CSS для мобильных устройств в запросе на медиа?

Я думаю, что это не жизнеспособная идея.

Затем, что мне делать? Мой коллега предложил мне загрузить разные CSS для разных медиа-ширины, но как?

Я хочу избежать @import в CSS, так как он снижает скорость сайта.

Answer 1

Да, вы можете загрузить различные CSS для разных видов/медиа-ширины. Предположим, вы сделали свой сайт меню CSS в menu.css и меню CSS вашего мобильного устройства в mobile.css затем:

<link rel='stylesheet' href='css/menu.css' type='text/css' media='screen'/> 
<link rel='stylesheet' href='css/mobile.css' type='text/css' media='screen and (max-width: 800px)'/> 

Вторая таблица стилей разработан специально для мобильных устройств дружной CSS, как вы хотите, и дополнительная часть and (max-width: 800px) загрузит эту таблицу стилей только по определенному размеру видового экрана.

Так что ура!