проблемы с window.addEventListener('resize',function()

В общем, когда использую window.addEventListener('resize',function() он вроде как работает, но нет. при изменении разрешения полностью исчезает все с сайта. не знаю как объяснить, лучше смотреть скриншоты.

function styles(){
        if(document.documentElement.clientWidth>900){
            document.write('<link rel="stylesheet" href="css/style.css" type="text/css">');
        }
        else{
            document.write('<link rel="stylesheet" href="css/style-mob.css" type="text/css">');     
        }
    }
    window.addEventListener('resize',styles());

в коде подключаю разные стили для разных устройств, пока только разбираюсь как это работает.

вот так выглядит сайт до изменения масштаба.

а вот так после.

как видно подключаются стили, но после них ничего нет.