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?

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?

• javascript
• css
• stylesheet

• I assume this to be a very localized issue. – Nitesh Commented Jul 31, 2013 at 10:26
• I have a hard time understanding why one should do that when you can work on responsive design. – Akki619 Commented Jul 31, 2013 at 10:28
• 1 you have two href in links..remove the first that point to style.css in both links. – Sbml Commented Jul 31, 2013 at 10:28
• Whops, sorry, I already deleted this, but didn't in the post yet. Sorry @Akash - I'm working with responsive design but 50% of a 1920px width monitor looks far more worse than on a 1280px monitor, so I want to give the 1920px-viewrs only 20% – loomie Commented Jul 31, 2013 at 10:31

1 Answer 1

<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 */
}