0

Реализовал 2 CSS
JS проверяет и выдаёт тот, который подходит.
Всё работает. Но получается в статике.
Хотелось бы реализовать динамический подхват CSS, без нажатия F5.
Без лишних framework'ов.
Пробовал вешать выбор на window.onresize = function(), но как-то не срабартывает. Как такую задумку реализовать, без громоздких framework'ов?

1
  • если нужно просто изменение в зависимости от ширины viewport'а, то это делается через media queries
    – etki
    12 окт 2015 в 19:00

2 ответа 2

1

Ну например так:

html:

<link id="style" rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript">
var style = document.getElementById('style');
window.onresize = function() {
window.innerWidth < 1000 ? style.setAttribute('href','style2.css') : style.setAttribute('href','style1.css');
}
</script>

css(style1.css)

body {background:red;}

css(style2.css)

body {background:green;}

Когда ширина браузера < 1000px показываем style2, иначе style1.

Но зачем, когда есть media queries.

Можно еще например тегу body менять класс, а в стилях делать привязку к нему

.style1 .mystyle {background:red;}
.style2 .mystyle {background: green;}
3
  • Скрипт проверил - не работает. А вот про "media queries" знал, но как-то по побаивался за совместимость (наверное зря).
    – I_CaR
    12 окт 2015 в 22:15
  • Так и у меня скрипт ловил ширину и работал. if (document.documentElement.clientWidth <= 1024) { document.write('<link href="settings/style_mini.css" type="text/css" rel="stylesheet">'); } else { document.write('<link href="settings/style.css" type="text/css" rel="stylesheet">'); } Сделал 1-файл, но с media queries. Всё работает прекрасно!
    – I_CaR
    12 окт 2015 в 22:36
  • @I_CaR они работают во всех браузерах еще с < 2010 года
    – etki
    13 окт 2015 в 5:20
0

надо подключать через media разные файлы, например:

link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css'
link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.