响应式CSS链接不起作用

Question

我的index.php文件中包含以下元数据

<meta name="viewport" content="width=device-width, maximum-scale=1.0,
    minimum-scale=1.0, initial-scale=1.0" />

我的index.php文件中还有以下CSS链接

<link rel="stylesheet" type="text/css" href="css/main_styles.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:320px;)
    and (max-width:480px;)" href="css/main_mobile.css" />

当我调整浏览器窗口大小时，第一个css链接可以正常使用（ css/main_styles.css ），但是第二个（ css/main_mobile.css ）则完全不可用。

我在这里三重检查了语法，找不到任何错误。

是什么导致无法拾取由视口宽度确定的第二个CSS？

我正在尝试使用其他方法在CSS文件本身中使用@media ，因为这会导致文件很长。

Answer 1

<link rel="stylesheet" type="text/css" media="only screen and (min-width:320px;)
    and (max-width:480px;)" href="css/main_mobile.css" />

更改为（最小宽度和最大宽度值后没有分号）

<link rel="stylesheet" type="text/css" media="only screen and (min-width:320px)
    and (max-width:480px)" href="css/main_mobile.css" />

Answer 2

<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px)
    and (max-width:1024px)" href="css/main_tablet.css" />

<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px)
    and (max-width:768px)" href="css/small_screen.css" />



<link rel="stylesheet" type="text/css" media="only screen and (min-width:320px)
    and (max-width:480px)" href="css/small_screen.css" />