<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 () {
var windowsWidht1 = $(window).width();
var windowsWidht2 = window.innerWidth;
var windowsWidht3 = $('body').width();
if(windowsWidht1 <= 600) {
two.css({
"background": "blue"
})
}else {
two.css({
"background": "red"
})
}
console.log("1: " + windowsWidht1 + " : " + windowsWidht2 + " : " + windowsWidht3)
})
span.on('click', function () {
var windowsWidht1 = $(window).width();
var windowsWidht2 = window.innerWidth;
var windowsWidht3 = $('body').width();
console.log("2: " + windowsWidht1 + " : " + windowsWidht2 + " : " + windowsWidht3)
})
Also see: Tab Triggers