Automatically change css when resolution is changed

What I've done is this

 <link type="text/css" rel="stylesheet" media="screen and (max-device-width: 1300px)" href="css/style.css">
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 1301px)" href="css/big.css">

The most important change dependent on the resolution is the following. The big.css uses this

.content
{
    width:20%;
}

and the style.css uses 50% for the width.

My problem now is, that I have two monitors. The right one responds to the style.css and the left one to the big.css When I now open the site on my right monitor it uses the style.css. The problem is, that when I grab the window and drag it to my left monitor the .css doesn't change UNLESS I reload the page. But I want it automatically to be changed when the window is dragged to a bigger screen. Maybe this is possible with JavaScript?

Solution

<link type="text/css" rel="stylesheet" media="screen and (max-width: 1199px)" href="css/style.css">
<link type="text/css" rel="stylesheet" media="screen and (min-width: 1200px)" href="css/big.css">

You could put also all styles in one file:

<link type="text/css" rel="stylesheet" media="screen" href="css/style.css">

CSS

/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 1199px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1200px) {
/* Styles */
}