<div class="one" id="one">Я отвечаю за медиазапросы</div>
<div class="two" id="two">А я за JavaScript</div>
<span>Моя ширина ровно 600px</span>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
body {
margin: 0;
}
div {
height: 60px;
margin: 20px 0;
font-size: 30px;
background: red;
}
span {
display: block;
height: 30px;
width: 600px;
background: black;
}
@media screen and (min-width: 1px) and (max-width:600px) {
.one {
background: blue;
}
}
var one = $("#one");
var two = $("#two");
var span = $("span");
$(window).on('resize', function () {
if (window.matchMedia("screen and (min-width: 1px) and (max-width:600px)").matches) {
two.css({
"background": "blue"
})
}else {
two.css({
"background": "red"
})
}
})
Also see: Tab Triggers