javascript - 更改分辨率时自动更改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 */
}