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

响应式CSS链接无效

2 个答案: