Кусок статьи с хабра:
Теперь о методе, которым пользуюсь я. Заключается он в использовании html-флагов для каждого диапазона. В качестве флага может выступать реальная конструкция верстки, появляющаяся только в нужном нам диапазоне размеров, либо пустой однопиксельный div.
Html:
<body>
<div class=”max_width_800”></div>
<div class=”max_width_479”></div>
</body>
CSS:
.max_width_800{
display: none;
}
.max_width_479{
display: none;
}
@media screen and (max-width: 800px) {
.max_width_800{
display: block;
}
.max_width_479{
display: none;
}
}
@media screen and (max-width: 479px) {
.max_width_800{
display: none;
}
.max_width_479{
display: block;
}
}
А в самом скрипте мы просто проверяем показан ли наш маркер:
if ($('.max_width_800').is(':visible')) {
// код jQuery
}
if ($('.max_width_479').is(':visible')) {
// код jQuery
}
Простой
Простой