Как подключить стили отдельным файлом?

Question

[Александр]

Нужно сделать сайт адаптивным. Можно написать например .header{...} а потом воспользоваться "@media" и изменить стиль под то, что нужно, но это не очень удобно как мне кажется. А как прописать в хэде html страницы, чтобы при определённом указанном разрешении экрана использовался другой файл стилей? То есть обычный style.css при заходе с компа с разрешением таким-то, а если меньше, то использовать например mobilestyle.css? Возможно вопрос простой, просто я не очень-то мастер...

Answer 1

[xxvxx]

<link rel="stylesheet" media="screen and (min-width: 1000px)" href="=/style.css" /> все что больше 1000рх
<link rel="stylesheet" media="screen and (max-width: 1000px)" href="=/style.css" /> все что меньше 1000рх
<link rel="stylesheet" media="screen and (min-width: 600px)  and (max-width: 900px)" href="/style.css" /> в промежутке от 600рх до 900рх

вообще как показывает практика лучше все делать в 1 файле

Comments

[Владимир]

caniuse.com/#search=import

[xxvxx]

Владимир: и?

[Владимир]

xxvxx: Был не внимателен

Answer 2

[Ankhena]

<style media="">
в media пишете условия

Answer 3

[Владимир]

Грубо говоря, так как вы хотите сделать, нельзя.
Как оказалось можно, но почему-то такой подход очень редко встречается в жизни, видимо потому что гораздо удобнее использовать сборщики проектов.
Для того, чтобы сделать файлы стилей легко поддерживаемыми существуют сборщики типа gulp, препроцессоры, постпроцессоры, методики типа БЕМ.
Мы у себя на проектах используем Stylus (stylus-lang.com/), из более современных на слуху сейчас PostCSS(postcss.org/)
Посмотрите вот это
https://ru.bem.info/methodology/
https://learn.javascript.ru/screencast/gulp
https://learn.javascript.ru/screencast/webpack