响应式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不被拾取？

我正在尝试一种不同的方法来使用@media我的css文件本身,因为它使得一个冗长的文件.

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