Блог

Как следует из названия, у меня есть две таблицы стилей, одна для мобильных устройств, другая для настольных компьютеров. Я объединяю и то, и другое с помощью @media screen and (max-width: 1007) {} запроса.

Однако это, похоже, не работает должным образом для меня, так как на некоторые элементы не влияет таблица стилей — таблица стилей рабочего стола переопределяет некоторые элементы, но не все, по какой-то причине.

Является ли плохой практикой комбинировать таблицы стилей? Должен ли я иметь отдельные ссылки на них в HTML-файле?

Моя рекомендация:

У меня было бы два отдельных CSS-файла в вашем lt;headgt; , например, так.

 lt;link rel="stylesheet" href="mystyle.css"gt; lt;link rel="stylesheet" href="responsive-styles.css"gt;  

В противном случае вы можете объединить их, имея только один main.css : это будет выглядеть так:

 @import url("style.css"); @import url("css/responsive.css"); @import url("css/custom.css"); @import url("css/fonts.css"); @import url("css/jquery-ui.css");  

Конечная цель при этом состоит в том, чтобы иметь только один .main CSS-файл, который включает в себя все ваши основные стили, адаптивные стили, шрифты и т.д.

Результат будет состоять только из этого в вашем lt;headgt;

 lt;link href="main.css" rel=stylesheetgt;  

Имейте в виду, что таблицы стилей загружаются параллельно, и страница не блокирует дальнейший анализ в ожидании загрузки таблицы стилей. Следовательно, моя рекомендация.