Window.onresize

by ostapische

HTML

<p id="size"></p>
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10px; width: 600px;">
    <ul id="holder" style="display: inline; list-style-type: none;">
            <li style="display: inline; list-style-type: none;">
                <img style="width: 200px;" src="http://yandex.st/www/1.630/yaru/i/logo.png" />
            </li>
            <li style="display: inline; list-style-type: none;">
                <img style="width: 200px;" src="http://www.google.ru/images/srpr/logo4w.png" />
            </li>
    </ul>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

JavaScript

window.onresize = getWindowWidthHeight;
window.onload = getWindowWidthHeight;
function getWindowWidthHeight(event){
    var size = document.getElementById('size');
    var width = window.innerWidth;
    var height = window.innerHeight;
    size.innerHTML = 'Window width: ' + width + 'px<br />Window height: ' + height + 'px';
    var firstLi = document.getElementById('holder').children[0];
    if (width > 600) {
        firstLi.style.display = 'inline';
    } else {
        firstLi.style.display = 'list-item';
    }
};