自動更改CSS

Question

我所做的就是這個

<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"> 

最重要的取決於分辨率變化如下。 big.css使用這個

.content 
{ 
    width:20%; 
} 

和style.css使用寬度的50％。

我現在的問題是，我有兩個顯示器。正確的響應style.css和左邊的big.css 當我現在在我的右側顯示器上打開網站時，它使用了style.css。問題是，當我抓住窗口並將其拖動到我的左側顯示器時，.css不會改變，除非我重新加載頁面。但是我希望窗口被拖動到更大的屏幕時自動更改它。 也許這可能與JavaScript？

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"> 

你也把所有的風格在一個文件中：

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