CSS：为什么我的媒体查询不起作用？

Question

我的CSS查询是这样的

<!-- CSS files for responsive side of site -->
 <link rel="stylesheet" type="text/css" media="screen and (max-width: 1920px) and (min-width: 1900px)" href="../Assets/CSS/Responsive1920.css">
 <!-- 1900 or less -->
 <link rel="stylesheet" type="text/css" media="screen and (max-width: 1900px) and (min-width: 1800px)" href="../Assets/CSS/Responsive1800.css">

这似乎不起作用。他们已经工作了几个月，现在突然间他们不工作了。我也没有对此进行任何更改。文件路径也正确。

Answer 1

您的屏幕尺寸条件看起来很严格，试试这个，您会看到尺寸为 1900 像素时的差异：

<!-- CSS files for responsive side of site -->
 <link rel="stylesheet" type="text/css" media="screen and (min-width: 1900px)" href="../Assets/CSS/Responsive1920.css">
 <!-- 1900 or less -->
 <link rel="stylesheet" type="text/css" media="screen and (max-width: 1900px)" href="../Assets/CSS/Responsive1800.css">

Answer 2

您可以按照以下方式修改您的代码：

    <link rel='stylesheet' media='screen and (min-width: 1900px) and (max-width: 1920px)' href='../Assets/CSS/Responsive1920.css' />

    <link rel='stylesheet' media='screen and (min-width: 1800px) and (max-width: 1900px)' href='../Assets/CSS/Responsive1800.css' />

CSS：为什么我的媒体查询不起作用？

CSS: Why are my media queries not working?

css

media-queries