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

更改分辨率时自动更改css

1 个答案: